Question

我知道钩子中的状态可以通过两种方式更改。1setCount(count - 1)， 2 setCount((prevCount) => prevCount - 1)，但是我不知道何时需要使用1和2种方式？

Answer 1

setCount(count - 1)仅在保证同步调用setCount并且count反映当前状态的情况下可以使用。几乎不会发生这种情况，因为这表明状态初始化出错：

const [count, setCount] = useState(0);

if (count == 0)
  setCount(count - 1);

否则，状态设置器通常在回调函数中调用，该回调函数将从封闭范围访问陈旧状态，这是useState的常见问题：

const [count, setCount] = useState(0);

useEffect(() => {
  setTimeout(() => {
    // count === 0 here, even if it was changed since then
    setCount(count - 1)
  }, 1000)
}, []);

使用状态更新器功能可确保正在使用新状态。状态更新可以通过以下方式进行批处理：

setCount(prevCount => prevCount - 1);
setCount(prevCount => prevCount - 1);

出于相同的原因，this.setState应该与状态更新程序一起使用，而不是在类组件中使用this.state。

Answer 2

基本上，您不想执行setCount(count - 1)，因为您的更新值基于现有状态值。

通过使用setCount((prevCount) => prevCount - 1)，您可以确保使用状态的最新值，而在某些情况下，非功能版本将使用过期的值。

另一方面，当您不关心状态的当前值时，可以使用setCount(7)。

如何正确更新挂钩中的状态

2 个答案: