Reactjs 为什么在 setTimeout 中更改状态会产生无限循环

import { useState } from "react";

function Card() {
  const [booksState, setBooks] = useState({
    books: [
      { name: "Harry", id: 1 },
      { name: "Potter", id: 2 },
      { name: "John", id: 3 },
    ],
  });

  console.log("test");

  setTimeout(() => {
    let newBooks = [
      { name: "test1", id: 4 },
      { name: "test2", id: 5 },
      { name: "test3", id: 6 },
    ];

    setBooks({
      books: [...booksState.books, ...newBooks],
    });
  }, 2000);

  return <div>TEST</div>;
}

export default Card;

import { useState } from "react";

function Card() {
  const [booksState, setBooks] = useState({
    books: [
      { name: "Harry", id: 1 },
      { name: "Potter", id: 2 },
      { name: "John", id: 3 },
    ],
  });

  console.log("test");

  useEffect(() => {
    setTimeout(() => {
      let newBooks = [
        { name: "test1", id: 4 },
        { name: "test2", id: 5 },
        { name: "test3", id: 6 },
      ];

      setBooks({
        books: [...booksState.books, ...newBooks],
      });
    }, 2000)
  }, []);

  return <div>TEST</div>;
}

export default Card;

Reactjs相关问答推荐

Redux toolet TypHelp：在使用redux thunk获取数据时无法读取未定义(读取类型)的属性

是否将样式应用于父悬停(框架运动)上的子元素？

有没有办法在Shopify中显示自定义计算的交货日期？

React，React Router，Joy UI：如何在导航离开和返回后禁用snackbar重新出现？

Reaction路由DOM v6不包含上下文(Supabase)

使用VITE的Reaction应用程序的配置是否正确？

如何通过reactjs正确显示记录

FabricJS反序列化问题

如何在 React 中停止嵌套 Link 和 Button 组件的事件传播？

Spring Boot + React + MySQL应用的架构层面有哪些？

Firebase查询返回随机用户数据，而不是过滤后的用户数据

React - 函数组件 - 点击两次问题处理

为什么我会收到此错误：无法在我的react 包上读取 null 的属性(读取useState)？

如何使用 React 更改 Material UI 中 ButtonGroup 的 colored颜色 ？

如何在react 中正确销毁上下文？

我正在try 使用 cypress 测试我的下拉列表，它 Select 值但不提交它们(手动工作)

react-markdown 不渲染 Markdown

如何使用react 路由将 url 参数限制为一组特定的值？

如何跨微前端 React 应用管理状态管理？

MUI 卡组件上的文本未正确对齐