React添加依赖后仍出现useEffect无限循环问题求助

1. 解决无限重渲染循环 #

你的useEffect依赖了users状态，而effect内部调用setUsers会修改users，触发组件重新渲染，进而再次执行useEffect，形成无限循环。

修复方法：将useEffect的依赖数组改为空数组，让effect仅在组件挂载时执行一次，避免重复触发。

2. 修正状态赋值错误 #

你当前用setUsers({responseData})把服务器返回的用户数组包裹成了对象（结构变为{responseData: [用户列表]}），这会导致后续无法正确遍历数据。应该直接将返回的数组赋值给状态：

setUsers(responseData);

3. 正确查看状态更新结果 #

setUsers是异步操作，在useEffect里直接console.log(users)会拿到更新前的旧值。如果要查看更新后的用户数据，可在组件函数体中直接打印，或新增一个监听users变化的useEffect：

useEffect(() => {
  console.log(users);
}, [users]);

4. 补充表格数据渲染（可选） #

当前代码仅渲染了表头，需补充用户数据行的渲染逻辑，同时要引入TableBody组件：

// 先在import中添加TableBody
import {
    TableContainer,
    Table,
    TableHead,
    TableRow,
    TableCell,
    TableBody
} from "@mui/material";

// 在TableHead后添加TableBody
<TableBody>
  {users.map((user) => (
    <TableRow key={user.id}>
      <TableCell>{user.username}</TableCell>
      <TableCell align="right">{user.firstName}</TableCell>
      <TableCell align="right">{user.lastName}</TableCell>
    </TableRow>
  ))}
</TableBody>

修正后的完整代码 #

import React, { useEffect, useState } from "react";
import { Box } from "@mui/system";
import {
    TableContainer,
    Table,
    TableHead,
    TableRow,
    TableCell,
    TableBody
} from "@mui/material";
import { USERS_URL } from "../utils/Constants";

function Users() {

    const [users, setUsers] = useState([]);

    useEffect(() => {
        fetch(USERS_URL, {
            method: "GET",
            headers: {"Authorization": sessionStorage.getItem("accessToken")}
        })
        .then((response) => response.json())
        .then((responseData) => {
            setUsers(responseData);
        })
        .catch((error) => console.error(error))
    }, []);

    console.log(users);

    return(
        <Box sx={{ flexGrow: 1 }}>
            <TableContainer>
                <Table sx={{ minWidth: 650, maxWidth: 1024 }}>
                    <TableHead>
                        <TableRow>
                            <TableCell>Username</TableCell>
                            <TableCell align="right">First Name</TableCell>
                            <TableCell align="right">Last Name</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {users.map((user) => (
                            <TableRow key={user.id}>
                                <TableCell>{user.username}</TableCell>
                                <TableCell align="right">{user.firstName}</TableCell>
                                <TableCell align="right">{user.lastName}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
        </Box>
    );
}

export default Users;

内容的提问来源于stack exchange，提问作者JamieRhys