我有一个计数器,在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中遇到了一些不太好的情况,现在你可以用refuseRef来避免它,例如在你的例子中:

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相关问答推荐

如何将数组转换为对象并在Javascript中赋值?

如何从具有一个到多个类名的元素中找到恰好具有特定和唯一类名(而不是任何其他类名)的元素?

Chromium 和 Safari 中不同的 `String` 函数行为

从对象数组中删除具有条件的元素

Javascript 显示下一个 prev 内容 appendchild

Javascript,将内联html js 转换为普通js

c++中的future是否对应于javascript中的promise?

SolidJS 中的条件样式

表过滤器/搜索两列

删除有条件的重复对象

如何在 p5js 中的视频上叠加形状?

当一次按下超过 2 个键时,p5.js keyIsDown() 行为不一致

在 Vue 中显示基于props 的条件文本的其他方式?

React Native FlatList 项目消失

将元素添加到 const 集

显示 React 中选定过滤器数组的总数

为什么我的 React.useEffect() 中有太多的重新渲染?

将js日期时间转换为时刻

使用谷歌脚本应用程序获取帖子的“401错误代码”

如何使用 JavaScript 对从 JSON 数据生成的 HTML Div 使用搜索/过滤器?