代码之家 › 专栏 › 技术社区 › maison.m

React JS:setState中的previous state在状态更新后不保留前一状态的数据

reactjs javascript

maison.m · 技术社区 · 6 年前

我有个问题 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() 做一个数组似乎与此不符。我的想法是,通过使用previous state,我可以创建一个全新的状态更新版本,其中包括数组中的previous和new数据。

注意:我用邮递员检查过这个 /mileage-data 获取route,它会按我的预期发送数据。所以我知道有数据被发送回这个获取请求。

这就是我遇到的问题:

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

我的理解是,这将创建一个数组,spread操作符将获取前一个数组的所有内容,并将它们与新数组中的新数据组合在一起。但是当我 console.log out数据更新后的状态,该状态只包含当前添加的数据,不保留以前的数据。

我肯定我错过了一些东西,或者我的方法不好。我在这段时间里没什么运气。两个晚上都在想办法解决这个问题!无论如何,提前谢谢你!

2 回复 | 直到 6 年前

Jordan Daniels 6 年前

尝试:

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

另外,您可能会在promise中丢失这个关键字的上下文。试着放 let that = this 在获取调用之上,并使用 that.setState 如果它仍然不起作用。

jlemm45 6 年前

我假设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);
  })