反应useState钩子，用函数调用setState [重复]

Posted 2023-02-21

【中文标题】反应useState钩子，用函数调用setState [重复]

【英文标题】：React useState hook, calling setState with function [duplicate]

【发布时间】：2021-05-26 02:03:33

【问题描述】：

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

我做了一个组件来解释（增加一个计数器）：

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

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

我的问题是：这两种方法有什么区别，什么方法最好设置状态。我已经阅读了关于状态不变性的信息，但无法立即看到它在这个示例中会产生怎样的影响。

【参考方案1】：

在你的情况下是一样的。 基本上，当你的状态是用你以前的状态计算时，你可以使用第二种方法来获取以前的值。

查看有关此的 React 文档：

Functional updates

【讨论】：

这没有回答问题。即使将函数传递给useState，您也无法访问新设置的状态，只能访问前一个。

我并没有说在传递回调的时候根本没有访问新状态，只是说第二种方法在需要根据前一种更新新状态时很有用一。