Javascript React 18，useEffect 被调用了两次

发布于05月14日

我有一个计数器，在useEffect上设置console.log，记录我状态的每一个变化

import  { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(5);

  useEffect(() => {
    console.log("rendered");
    console.log(count);
  }, [count]);

  console.log("rendered");

  return (
    <div>
      <h1> Counter </h1>
      <div> {count} </div>
      <button onClick={() => setCount(count + 1)}> click to increase </button>
    </div>
  );
};

export default Counter;

Sandbox

Edit:我的react版本是"18.1.0"

推荐答案

当你在strict mode in development时，这是react 18本身的问题.基本上，即使在React 18中卸载组件后，核心团队仍在试图改变组件的状态.useEffect打两次电话与此功能有关.目前正在讨论如何解决这个问题.要了解更多信息，你可以看这YouTube Video.

在大多数情况下，你不必担心这个问题，因为在你完成项目后，问题会在production mode分钟内消失.然而，如果你在production中遇到了一些不太好的情况，现在你可以用ref和useRef来避免它，例如在你的例子中:

import  { useState, useEffect, useRef } from "react";

const Counter = () => {
  const firstRenderRef = useRef(true);
  const [count, setCount] = useState(5);

  useEffect(() => {
    if(firstRenderRef.current){
      firstRenderRef.current = false;
      return;
    }
    console.log("rendered");
    console.log(count);
  }, [count]);

  return (
    <div>
      <h1> Counter </h1>
      <div> {count} </div>
      <button onClick={() => setCount( count + 1 )}> click to increase </button>
    </div>
  );
};

export default Counter;

Javascript React 18，useEffect 被调用了两次

推荐答案

Javascript相关问答推荐

如何在Angular中插入动态组件

使用i18next在React中不重新加载翻译动态数据的问题

Next.js(react)使用moment或不使用日期和时间格式

如何让npx在windows中运行js脚本？

使用JQuery单击元素从新弹出窗口获取值

ChartJs未呈现

Angular 形式，从DOM中删除不会删除指定索引处的内容，但会删除最后一项

在SHINY R中的嵌套模块中，不能使用Java代码

删除元素属性或样式属性的首选方法

FireBase云函数-函数外部的ENV变量

OnClick更改Json数组JSX中的图像源

当我点击一个按钮后按回车键时，如何阻止它再次被点击

如何在Java脚本中对数据进行签名，并在PHP中验证签名？

Pevent触发material 用户界面数据网格中的自动保存

如何使用Reaction路由导航测试挂钩？

Played link-Initialize.js永远显示加载符号

ReactJS Sweep Line：优化SciChartJS性能，重用wasmContext进行多图表渲染

在D3.js中创建具有旋转手柄的可拖动、可调整大小的框？

Reaction：从子组件调用父组件中的函数

ReactJS扫描线演示：多个曲面未同时更新的问题