React useState钩子，调用setState函数

Question

React中有一个概念(当使用钩子时)让我感到困惑。

我做了一个组件来解释(增加计数器):

const [counter, setCounter] = useState(0); // counter hook
// code will follow
// render
return (
<div>
<button onClick={handleClick}>+</button>
<h3>{counter}</h3>
</div>
);

对于handler函数，我已经看到了设置状态的不同选项。

第一种方法(通常使用setState()):

const handleClick = () => {
setCounter(counter + 1);
};

第二个方法(在setState()内部创建一个函数并返回新值):

const handleClick = () => {
setCounter((counter) => {
return counter + 1;
});
};

我认为区别在于第二个方法，您可以在设置状态后立即执行回调，如下所示:

const handleClick = () => {
setCounter((counter) => {
return counter + 1;
}, () => {
console.log(counter); // trying callback after state is set
});
};

但是当尝试这样做时(使用两种方法)，控制台显示以下错误消息:

警告:useState()和useReducer()钩子的状态更新不支持第二个回调参数。要在渲染后执行副作用，可以使用useEffect()在组件体中声明它。

所以我认为在这两种情况下，使用useEffect()作为setState()的回调是正确的方式。

我的问题是:这两种方法有什么区别，哪种方法最好设置状态。我读过关于状态不变性的内容，但是不能立即看出它在这个例子中会有什么不同。

Answer 1

在你的情况下是一样的。

基本上，当你的状态与你的前一个状态计算时，你可以使用第二种方法，它获得前一个值。

请查看React文档:

功能更新

Answer 2

既然这个问题引起了一些注意，我将添加这个例子。

<button onClick={() => setCount(0)}>Reset</button>
<button onClick={() => setCount((prevCount) => prevCount - 1)}>-</button>
<button onClick={() => setCount((prevCount) => prevCount + 1)}>+</button>

您可以看到+和-正在使用setState函数，这是因为新的状态值是使用前一个状态计算的(您正在添加/减去前一个计数值)。

reset按钮使用正常形式，因为它不会基于旧值的计算来计算新的状态值，它总是将其设置为固定的数字(例如0)。

所以在我的情况下，最好的做法是使用功能setState。