React 不会在状态更新后重新渲染组件

Question

我正在编写一个 React 页面，显示由外部 API 获取的测验列表。同时，我的页面有一个“新测验”按钮，它会打开一个对话框，其中包含一个表单，供用户配置和创建新测验。

这里是问题所在：我不确定如何在 POST 请求完成后让我的 table 重新呈现。在研究了 useEffect() 的第二个参数之后，我最终面临两种情况：

Table 在 POST 之后重新渲染，但 useEffect 进入无限循环
useEffect 不会进入无限循环，但table不会重新渲染

这是我的代码：

   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();
   }, [])

由于这里使用的第二个参数是[]，所以是不重新渲染的版本。我试过放置 [quizzes]，它解决了前端的问题；但是我的 Flask 服务器被 GET 请求淹没了。

我还会注意到这与此线程中的问题非常相似：

但是，我无法通过那里提供的解决方案解决问题。

任何见解将不胜感激。

Answer 1

  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);
   }

此处您在 post 请求完成之前获取，因此您没有获得更新的结果。仅在 post 完成后使用 async await 和运行 fetchQuizzes。

此外，useEffect 运行s 每当依赖项数组中发生任何更改时...因此，如果您从 useEffect 内部更改某些依赖项，则会导致无限循环

React 不会在状态更新后重新渲染组件

React does not re-render component after state update

javascript

reactjs

use-effect