Question

我的代码是 here。

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

很遗憾，我遇到了一个奇怪的问题。

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

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

当我为状态变量 staffDetail 设置一个值时，这意味着以下语句，

setStaffDetail(staff);

浏览器显示以下消息：

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

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

Answer 1

因为它 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);
    }
  }

Answer 2

你不需要计数变量来更新你的数组数据。尝试使用useEffect，我的代码here

      let staffData = props.staffData;
      const [staffList, setStaffList] = useState();
      useEffect(() => {
        const list = [];
        for (const [staffId, staff] of Object.entries(staffData)) {
          list.push(
            <tr key={staffId}>
              <td>{staff.name}</td>
            </tr>
          );
        }
        setStaffList(list);
      }, []);

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

2 个答案: