时间戳

首页 > 解决方案 > 当我更新子组件的状态变量时，为什么会导致无限循环？

reactjs - 当我更新子组件的状态变量时，为什么会导致无限循环？

问题描述

我的代码在这里。

我正在创建一个标题详细信息页面，我想在员工详细信息表中显示第一个员工详细信息。

不幸的是，我面临一个奇怪的问题。

为了从服务器获取数据，我需要使用useEffect钩子，所以我必须将数据保存到staffDataApp.js 中的一个状态变量（即）中，然后提交给StaffManagement组件。

为了在人员详细信息表中显示第一个人员详细信息，我staffDetail在StaffManagement组件中创建了一个状态变量。

当我为 state variable 设置一个值时staffDetail，这意味着以下语句，

setStaffDetail(staff);

浏览器显示以下消息：

Too many re-renders. React limits the number of renders to prevent an infinite loop.

我的组件中没有useEffect钩子StaffManagement，为什么会导致无限循环？

标签： reactjsreact-state

解决方案

因为它setStaffDetail每次渲染。当setStaffDetail调用它触发渲染时，它setStaffDetail......你需要将它包装在一个useEffect

useEffect(() => {
    for (const [staffId, staff] of Object.entries(staffData)) {
      staffList.push(
        <tr key={staffId}>
          <td>{staff.name}</td>
        </tr>
      );
      if (count === 0) {
        setStaffDetail(staff);
      }
    }
}, [staffData]);

另一种解决方法是使用useRef

const count = useRef(0);


for (const [staffId, staff] of Object.entries(staffData)) {
    staffList.push(
      <tr key={staffId}>
        <td>{staff.name}</td>
      </tr>
    );
    if (count.current === 0) {
      count.current++;
      setStaffDetail(staff);
    }
  }

推荐阅读