[英]React does not re-render component after state update
I am writing a React page that displays a list of quizzes that is being fetched by an external API.我正在编写一个 React 页面,该页面显示由外部 API 获取的测验列表。 At the same time, my page has a "New Quiz" button which opens up a dialog with a form for the user to configure and create a new quiz.
同时,我的页面有一个“新测验”按钮,它会打开一个对话框,其中包含一个供用户配置和创建新测验的表单。
Here is the issue: I am not sure how I can make my table re-render once the POST request is completed.这是问题所在:我不确定如何在 POST 请求完成后重新渲染表。 After playing around with the 2nd argument of useEffect() for a bit, I am ultimately faced with 2 scenarios:
在玩了一下 useEffect() 的第二个参数之后,我最终面临两种情况:
Here is my code:这是我的代码:
const handleSubmit = () => {
setLoading(true);
const body = {
name: newQuizName,
collectionId: newQuizCollection,
length: newQuizLength,
estimator: newQuizEstimator,
survey: newQuizSurvey
}
axios.post(quizzes_api, body).then(res => console.log(res));
fetchQuizzes();
resetDialog();
setLoading(false);
}
const quizzes_api = `http://localhost:5000/quizzes`;
const pools_api = `http://localhost:5000/pools`;
const fetchQuizzes = () => {
axios.get(quizzes_api).then(res => setQuizzes(res.data));
}
const fetchPools = () => {
axios.get(pools_api).then(res => setPools(res.data))
}
useEffect(() => {
fetchQuizzes();
fetchPools();
}, [])
Since the 2nd argument used here is [], it is the version that does not re-render.由于这里使用的第二个参数是 [],它是不重新渲染的版本。 I have tried putting [quizzes], which solves the issue on the front-end;
我试过放[quizzes],解决前端的问题; but my flask server gets flooded with GET requests.
但是我的 flask 服务器被 GET 请求淹没了。
I will also note that this is very similar to the question in this thread: React useEffect caused infinite loop我还会注意到这与该线程中的问题非常相似: React useEffect 导致无限循环
However, I am not able to solve the problem with the solution offered over there.但是,我无法使用那里提供的解决方案来解决问题。
Any insights will be greatly appreciated.任何见解将不胜感激。
EDIT: For future readers who may encounter this same issue and be confused between async/await VS Promise.then() behavior like myself (I thought they can be used interchangeably), this reference may be helpful: https://stackoverflow.com/a/68987830/11637379编辑:对于可能遇到同样问题并在 async/await VS Promise.then() 像我这样的行为之间感到困惑的未来读者(我认为它们可以互换使用),此参考可能会有所帮助: https://stackoverflow.com /a/68987830/11637379
const handleSubmit = () => {
setLoading(true);
const body = {
name: newQuizName,
collectionId: newQuizCollection,
length: newQuizLength,
estimator: newQuizEstimator,
survey: newQuizSurvey
}
axios.post(quizzes_api, body).then(res => console.log(res));
fetchQuizzes();
resetDialog();
setLoading(false);
}
here you're fetching before the post request is completed hence you're not getting an updated results.在这里,您在发布请求完成之前获取,因此您没有得到更新的结果。 use
async await
and run fetchQuizzes
only after the post is completed.仅在帖子完成后使用
async await
并运行fetchQuizzes
。
Also, useEffect
runs whenever anything changes in the dependency array...so if you change some dependency from inside the useEffect
, it'll cause an infinite loop此外,只要依赖数组中发生任何变化,
useEffect
运行......因此,如果您从useEffect
内部更改某些依赖项,则会导致无限循环
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.