无法修复反应钩子中太多的重新渲染问题

Question

当我从服务器获取数据并试图显示加载器时，我从服务器加载数据时，我得到了太多的重新渲染错误。错误来自这一行

86 | setAllVideo(res.data);

这是我的代码

const UserDetails = () => {
const classes = useStyles();
const [datas, setDatas] = useState({
name: "",
email: "",
phone: "",
userStatus: "",
});
const [imageData, setImageData] = useState({ name: "" });
const [videoData, setVideoData] = useState({ name: "" });
const [allVideo, setAllVideo] = useState([]);
const location = useLocation();
const query = new URLSearchParams(location.search);
let userId = query.get("id");
let zoneId = 1;
useEffect(() => {
async function fetchData() {
const { data } = await axios.get(
`http://localhost:3001/admin/api/v1/userData/${userId}`,
{
headers: {
Authorization: `here is jwt key`,
},
}
);
setDatas(data.userData);

const res = await axios.post(
`http://localhost:3001/admin/api/v1/getAllVideoContent`,
{ zoneId: zoneId },
{
headers: {
Authorization: `here is jwt key`,
},
}
);
setAllVideo(res.data);
}
fetchData();
}, [
userId,
zoneId,
datas.name,
datas.email,
datas.phone,
datas.userStatus,
videoData.name,
imageData.name,
allVideo,
]);

这里是我从API调用中使用取值的视图，当我通过allVideo状态映射

时，这似乎是一个问题

return (
<div className={classes.root}>
<Grid container spacing={2} padding="">
<Grid item xs={3}>
{datas && datas.name}
</Grid>
<Grid item xs={3}>
{datas && datas.phone}
</Grid>
<Grid item xs={3}>
{datas && datas.email}
</Grid>
<Grid item xs={3}>
{datas && datas.userStatus}
</Grid>

<Grid item md={6} xs={12} alignContent="center">
{datas && datas.name}'s Currently Playing Content{" "}
</Grid>

<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Select a video</Modal.Title>
</Modal.Header>
<Modal.Body>
{allVideo &&
allVideo?.content?.map((video) => {
return (
<label key={video.id}>
<input
type="radio"
key={video.id}
onchange={setnewVideo(video.id)}
value={video.id}
/>
{"  " + video.name}
</label>
);
})}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</div>
);
};

Answer 1

在你的最后一部分

}, []);

应该提供依赖项。哪些值在改变时会影响useEffect。例如，潜在的候选者是userId。您可以通过将其包含为

来测试它。

}, [userId]);

Answer 2

我认为，在依赖项中存在问题。这是你当前的代码:useEffect({}, []);但我认为你需要这样编辑:useEffect({}, [userID]);我认为你使用useState({});是错误的像这样使用:useState();希望对大家有所帮助。