React JS：setState中的previousState在状态更新后不保留先前状态的数据

Question

我遇到了一个问题，即previousState 在每次更新状态时都不会保留先前状态的数据。当我用新数据更新状态时，之前的状态被清除，只有最近添加的数据可用。

这是第一段代码。这个获取请求在componentDidMount()内部，所以每次刷新组件时，它都会重新获取新数据并更新状态：

fetch('/mileage-data')
    .then(res => res.json())
      .then(data => {
        const state = this.state;
        const test = data.data.startingOdo;
        const test2 = data.data.endingOdo;

        if(!state.startingOdometer || !state.startingOdometer) {
          this.setState({ 
            startingOdometer: data.data.startingOdo,
            endingOdometer: data.data.endingOdo
          })
        }

        this.setState(prevState => ({
          startingOdometer: [...prevState, test],
          endingOdometer: [...prevState, test2]
        }))

      })
      .catch(err => {
         console.log(err);
      })

这就是状态的样子：

this.state = {
  startingOdometer: '',
  endingOdometer: ''
}

首先，我检查初始状态是否未定义，如果是，则省略之前的状态，只添加新数据。

我的理解是你不应该改变状态，所以使用push() 之类的东西来创建一个数组似乎与此不一致。我的想法是，通过使用先前的状态，我可以制作一个全新的更新版本的状态，其中包括数组中的先前和新数据。

注意：我使用 Postman 检查了这个 /mileage-data GET 路由，它确实按我的预期发回了数据。所以我知道有数据被发送回这个获取请求。

这是我遇到问题的地方：

this.setState(prevState => ({
  startingOdometer: [...prevState, test],
  endingOdometer: [...prevState, test2]
}))

我的理解是，这应该是创建一个数组，展开操作符会将前一个数组的所有内容，与新的数据组合成一个新的数组。但是当我console.log出数据更新后的状态时，状态只包含当前添加的数据，不保留之前的数据。

我确定我在这里遗漏了一些东西，或者我的方法可能不好。我通过 SO 的运气为零。现在住了两晚，试图解决这个问题！无论如何，提前谢谢你！

Answer 1

试试：

 this.setState(prevState => ({
      startingOdometer: [...prevState.startingOdomoter, test],
      endingOdometer: [...prevState.endingOdometer, test2]
    }))

此外，您可能会丢失承诺中 this 关键字的上下文。尝试将 let that = this 放在 fetch 调用上方，如果仍然无法正常工作，请使用 that.setState。

Answer 2

我假设 data.data.startingOdo 是一个对象。有时将它设置为一个对象并排列其他对象是没有意义的。

据我所知，您只需要不断将新数据添加到数组中即可。为什么不是这个？

此外，如果您需要在卸载和重新安装组件时保持状态，您需要查看某种类型的全局状态管理，例如 redux。

// set initial state to empty arrays
state = {
  startingOdometer: [],
  endingOdometer: [],
}

fetch('/mileage-data')
.then(res => res.json())
  .then(data => {
    const {startingOdometer, endingOdometer} = this.state;

    this.setState({ 
      startingOdometer: [...startingOdometer, data.data.startingOdo],
      endingOdometer: [...endingOdometer, data.data.endingOdo],
    })

  })
  .catch(err => {
     console.log(err);
  })