功能组件的setState中的prevState到底是什么?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了功能组件的setState中的prevState到底是什么?相关的知识,希望对你有一定的参考价值。

setState挂钩获得的useState内返回(然后改变)以前的状态似乎并没有改变状态。运行以下直接代码段

function App()
  const [state, setState] = React.useState([x: 0])
  function changeCount()
    setState(prevState => 
      console.log('before', prevState[0])
      const newState = [...prevState]
      newState[0].x += 1 //the shallow copy newState could potentially change state
      console.log('after', prevState[0])//here x gets bigger as expected
      return prevState //instead of newState we return the changed prevState
    )
  
  //checking state shows that x remained 0
  return <div className='square' onClick=changeCount>state[0].x</div>

ReactDOM.render(<App/>, document.getElementById('root'))
.square
  width: 100px;
  height: 100px;
  background: orange;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id='root'></div>
通过单击正方形,我们触发setState。在setState中,我们复制了先前状态的浅表newState。通过更改副本,我们在控制台确认时更改了prevState(可能是无意的)。但是,返回更改后的先前状态形式setState不会更改状态,因为计数仍为0。如果我们要返回newState,则行为将与预期的一样。

重复此操作,表明prevState变大,似乎不再代表以前的状态。

为什么?我在codepen ...上做了这个最小的例子。

返回一个从useState挂钩获得的setState中的先前状态,然后(更改)它似乎并没有改变状态。运行以下直接代码段功能App()const [...

答案

请注意,当您的状态取决于先前的状态值时,通常在需要基于旧值进行一些计算(例如递增)的计数器的情况下,建议使用setFuntion中的回调,该回调从useState,

以上是关于功能组件的setState中的prevState到底是什么?的主要内容,如果未能解决你的问题,请参考以下文章

将 prevstate 参数添加到 this.setState 会导致 typeError

反应钩子中的prevstate

是否可以将自定义参数传递给setState回调函数?

我可以改变传递给 setState 函数的状态吗?

react setState 的用法

用动态键反应 setState