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

此外，您可能会在承诺中丢失此关键字的上下文。尝试将let that = this置于提取调用之上，如果仍然无效，请使用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);
  })

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

2 个答案: