我正在学习react Use Effect(). 在本例中,"Render"在我第一次运行应用程序时被记录了两次.

import { useState, useEffect } from "react";

function MyComponent() {
  const [resourceType, setResourceType] = useState("posts");

  useEffect(() => {
    console.log("render");
  }, [resourceType]);

  return (
    <>
      <div>
        <button onClick={() => setResourceType("posts")}>Posts</button>
        <button onClick={() => setResourceType("users")}>Users</button>
        <button onClick={() => setResourceType("comments")}>Comments</button>
      </div>
      <h1>{resourceType}</h1>
    </>
  );
}

export default MyComponent;

它应该在应用程序运行时呈现它一次. 为什么它在控制台日志(log)中打印两次.

推荐答案

这是由React严格模式引起的.

100,这仅在严格模式下发生,不应在生产版本中发生.这种行为被认为是正常的,特别是在本地宿主或发育中.(请阅读下面的内容以了解原因)

解释

在react 严格模式中,某些生命周期方法,包括渲染和效果,可能会被双重调用以检测副作用.此行为特定于开发模式,旨在帮助捕获和记录副作用问题.它不应该出现在生产中.

如果只在开发模式下观察到双重调用,而您的应用程序在生产模式中按预期工作,则很可能与严格模式行为有关.

在开发(严格模式)时不要担心,因为一切都按预期运行

Javascript相关问答推荐

如何通过onClick为一组按钮分配功能;

如何在RTK上设置轮询,每24小时

使用复选框在d3.js多折线图中添加或删除线条

我不知道为什么setwritten包装promise 不能像我预期的那样工作

JQuery. show()工作,但. hide()不工作

Msgraph用户邀请自定义邮箱模板

在nextjs服务器端api调用中传递认证凭证

自定义高图中的x轴标签序列

函数返回与输入对象具有相同键的对象

setcallback是什么时候放到macrotask队列上的?

当Redux提供程序访问Reduxstore 时,可以安全地从Redux提供程序外部调用钩子?

如何强制Sphinx中的自定义js/css文件始终加载更改而不缓存?

将核心模块导入另一个组件模块时存在多个主题

如何迭代叔父元素的子HTML元素

如何在Bootstrap中减少网格系统中单个div的宽度

如何在和IF语句中使用||和&;&;?

设置复选框根据选中状态输入选中值

将Windows XP转换为原始数据以在html前端中显示

当一条路由在Reaction路由中命中时,如何有条件地渲染两个组件或更改两个插座?

用内嵌的含selenium的Java脚本抓取网站