React useState 钩子，使用函数调用 setState [重复]

Question

React 中有一个概念（当使用 hooks 时）让我感到困惑。

我制作了一个用于解释的组件（增加了计数器）：

const [counter, setCounter] = useState(0); // counter hook

// code will follow

// render
return (
  <div>
    <button onClick={handleClick}>+</button>
    <h3>{counter}</h3>
  </div>
);

对于处理函数，我看到了设置状态的不同选项。

第一种方法（通常使用

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() Hook 的状态更新不支持第二个回调参数。要在渲染后执行副作用，请在组件主体中使用 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

。