响应useState挂钩，使用函数调用setState [英] React useState hook, calling setState with function

问题描述

在Reaction(使用挂钩时)中有一个概念让我困惑。

我做了一个组件进行解释(增加了一个计数器)：

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

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

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

推荐答案

在您的情况下是相同的。

基本上，当使用以前的状态计算您的状态时，您可以使用第二种方法来获取以前的值。

查看Reaction文档中有关此问题的信息：

Functional updates

这篇关于响应useState挂钩，使用函数调用setState的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！