假设您的状态如下

const [elements, setElements] = React.useState([]);

我注意到的奇怪的事情是,当使用接受一个函数的setter时,它似乎执行了两次控制台日志(log),我不知道为什么.有什么解释吗?


const handleAddClick = (e) => {
    console.log("button clicked");
    setElements((elems) => {
      console.log("set elements called");
      return [...elems, "abc"];
    });
  };

Output

button clicked
set elements called
set elements called

推荐答案

这要归功于StrictMode美元.

StictMode项操作的列表中,它包括:

状态更新器函数(setState的第一个参数)

在严格模式下,状态更新器函数可能会被调用两次以捕获副作用.如果您的更新器函数是纯的,那么它不会引起任何问题--并且双重更新不会在生产中发生.

如果您的更新器函数状态发生变化,您将看到奇怪的行为,这将有助于识别错误.

Reactjs相关问答推荐

webpack 5中动态导入的路径

在Next.js中实现动态更改的服务器组件

在下一个js中使用ESTAccountWithEmailAndPassword函数时循环

ReactJs;Reaction-Hook-Form:仅当 Select 了特定 Select 列表选项时才显示文本输入

如何使Reaction Select 选项菜单从选项数组的特定索引开始

Next.js:提交表单时状态尚未就绪

更改购物车中的产品数量后,PayPal Reaction/Next JS按钮未更新

react -在选项中 Select 我想要显示和图像.但当我 Select 该选项时,我希望控件仅显示该选项的文本部分

为什么我的react虚拟化列表不显示滚动条,除非我确保高度低于rowCount*rowHeight?

StyleX中的多语言支持

Next.js Next-Auth登录函数重定向到http://localhost:3000/api/auth/error

在 React 中,为什么不将组件和钩子结合起来呢?

如何修复ReferenceError:在构建过程中未定义导航器

为什么 useEffect 的初始化对于加载 localStorage 不起作用?

Material UI @mui/material/Button vs @material-ui/core/Button,它什么时候改变的,旧版本的文档在哪里

Next.js i18n 路由不适用于动态路由

docker:来 automorphic 护进程的错误响应:未指定命令.的原因是什么?

如何在 Cypress E2E 的站点上测试react 组件?

如何在 v6.4 中将 Auth0 提供程序与新的 createBrowsereRouter 一起使用?

RTK 查询 POST 方法不会改变数据