我目前有以下代碼：
用戶.js
import React, { useEffect, useState } from "react";
import { Box } from "@mui/system";
import {
TableContainer,
Table,
TableHead,
TableRow,
TableCell,
} from "@mui/material";
import { USERS_URL } from "../utils/Constants";
function Users() {
const [users, setUsers] = useState([]);
const [isDone, setIsDone] = useState(false);
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);
}, [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>
</Table>
</TableContainer>
</Box>
);
}
export default Users;
但是，正如標題所述，在重新渲染組件時，這會無限回圈。一旦它要求我擁有的用戶串列，我該如何阻止這種情況發生？
僅供參考，我正在從我的服務器應用程式接收正確的資料，正如我所期望的那樣。
編輯：-
我更改了代碼以反映建議的內容：
useEffect(() => {
...
}, []);
但是，陣列現在回傳空。
uj5u.com熱心網友回復：
您應該users從依賴陣列中洗掉。這是因為當效果運行時，您將設定users狀態。并且由于您設定了狀態，組件會重新渲染，并且 react 檢查是否需要運行任何效果。既然users已經改變，react 會再次運行效果，再次設定狀態，以此類推。
uj5u.com熱心網友回復：
嘗試替換 useEffect(() => {}, [users]); 上：
useEffect(() => {
...
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/503806.html
標籤：javascript 反应