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

Question

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

问题是：我不确定如何在 POST 请求完成后重新渲染表格。在玩了一下 useEffect() 的第二个参数之后，我最终面临两种情况：

1. 表在 POST 后重新渲染，但 useEffect 进入无限循环
2. useEffect 不会进入无限循环，但表格不会重新渲染

这是我的代码：

   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]，解决前端的问题；但是我的烧瓶服务器被 GET 请求淹没了。

我还要注意，这与此线程中的问题非常相似：React useEffect caused infinite loop

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

我们将不胜感激任何见解。

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

在这里，您是在发布请求完成之前获取的，因此您没有得到更新的结果。使用async await 并仅在帖子完成后运行fetchQuizzes。

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