很晚才更新状态，刚刚评估了控制台错误值。如何解决

Question

我对这里发生的事情完全感到困惑。我在 React 中设置状态，但它更新得很晚。这是函数：

fetchTimesheets() {
    const userId = cryptInfo.decrypt(localStorage.getItem('user_id'))
    var userArray = []
    var timeSheets = []
    fetchManagerProject(userId)
      .then(async (res) => {
        const projects = await res.json()
        projects.forEach(project => {
          project.teammember && project.teammember.forEach(member => {
            if (userArray.indexOf(member.user) === -1) {
              userArray.push(member.user)
              fetchUserTimelogs(member.user)
                .then(async (res) => {
                  const timesheet = await res.json()
                  if (timesheet)
                    timesheet.forEach(sheet => {
                      timeSheets.push(sheet)
                    });
                })
            }
          })
        })
        
        this.setState({
          timesheets: timeSheets
        })
      })

  }
     

我在componentDidMount方法上调用这个函数

componentDidMount() {
    this.fetchTimesheets()
}

但是我知道我的值刚刚被评估并且状态没有更新。我看到了很多与此相关的问题，但没有得到好的解决方案。

Answer 1

您是否检查过是您发出的请求需要很长时间还是 setState 本身？

您的 fetchTimesheets 在一个循环 (forEach) 上包含多个 http 请求，根据请求的不同，这可能需要一些时间才能完成。因为forEach 循环是一个阻塞函数，这意味着您的setState 函数在forEach 函数执行完成之前不会被调用。

为了加快速度，您可以考虑在每次获得新时间表时将时间表设置为状态。例如

fetchManagerProject(userId)
    .then(async (res) => {
    const projects = await res.json()
    projects.forEach(project => {
        project.teammember && project.teammember.forEach(member => {
        if (userArray.indexOf(member.user) === -1) {
            userArray.push(member.user)
            fetchUserTimelogs(member.user)
            .then(async (res) => {
                const timesheet = await res.json()
                if (timesheet)
                timesheet.forEach(sheet => {
                    timeSheets.push(sheet)
                });
                const newTimesheet = this.state.timesheets.concat(timesheet);
                this.setState({timesheets: newTimesheet});
            })
        }
        })
    })
})

Answer 2

我认为函数fetchTimesheets()是同步作用的，你可以把函数定义改成async，然后调用方法改成await fetchTimesheets()。