功能组件的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到底是什么?的主要内容,如果未能解决你的问题,请参考以下文章