Question

很抱歉，如果有人已经回答了这个问题，但是我没有找到想要的东西。

我最近开始学习反应，并注意到有很多设置状态的方法。例如，我在一个对象中有一个计数器，我想增加它。

const [state, setState] = React.useState({ counter: 0 });

下面的所有函数都给出相同的结果，但是据我了解，它们是异步执行的。

setState({ ...state, counter: counter + 1 }):

setState(() => ({ ...state, counter: counter + 1 }));

setState(prevState => ({...prevState, counter: counter + 1 }));

setState(counter = counter + 1);

调用setState函数后如何立即正确更新状态？预先谢谢你！

Answer 1

为了对状态的新更新值做一些逻辑，您应该使用

The UseEffect Hook

useEffect(() => {
   /* use the new state value here */
}, [state])

或 [如果使用组件类]，则为回调函数

this.setState({ ...state, counter: counter++ }, 
  () => { /* use the new state value here */  }
);

对于一个简单的计数器，也为了避免混淆React组件和React钩子，我建议使用这样的useState：

const [counter, setCounter] = React.useState(0);
setCounter(counter++);

Answer 2

如何立即更新state

您不能，因为您已经用 state 声明了const，对吗？

const /*const*/ [state, setState] = React.useState({ counter: 0 });

function handleClick() {
  setState(anything)
  // you declared state with const, you "obviously" shouldn't expect this 
  // to "somehow" immediately change `state` to anything
}

即使state异步更新（或不是立即更新）取决于环境，也只能使其按预期工作。如果要获取状态的新更新值以供日后使用，请正确的方法来缓存要使用的新值。例如：

const newStateA = changeState(stateA)
setStateA(newStateA)

setStateB(calculateBFromA(newStateA)) 
// instead of
setStateB(calculateBFromA(stateA)) // will get the old value of stateA

当然，如果您没有用state = something声明const，例如let或var，则可以设置{{1} }，但是除非您使用“第二个数组分解的”参数state设置它，否则它不会告诉React之后再重新渲染组件。谈论Hooks），顺便说一句（用let / var声明状态）显然是错误的方式

Answer 3

您的意思是

调用setState函数后如何立即正确更新状态？

？您实际上是在setState函数中更新状态，因此问题本身听起来很奇怪。如果要在设置新值后立即同步执行某些操作，则可以使用Seba99提到的回调函数。这是指向文档(basically it's setState docs)的链接。状态更新后将执行可选的回调，并且其中的this.state将始终是您在setState中所做的最新更改。因此，如果您需要同步获取最新状态并执行一些操作（甚至还要更新一次状态），请使用this.setState的回调。

立即更新状态的正确方法是什么？

3 个答案: