更新狀態的時間很晚，並且控制台錯誤值剛剛得到評估。 怎么解決

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

我相信函數fetchTimesheets()正在同步運行，您可以將函數定義更改為async ，然后將方法調用為await fetchTimesheets() 。

Answer 2

您是否檢查過要花費很長時間的請求還是setState本身？

您的fetchTimesheets在一個循環（forEach）上包含多個http請求，這可能需要一些時間才能完成，具體取決於請求。 因為forEach循環是一個阻塞函數，這意味着在forEach函數執行完成之前，不會調用setState函數。

為了加快速度，您可以考慮在每次獲取新時間表時將其設置為狀態。 例如

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});
            })
        }
        })
    })
})