useEffect依赖项不重新呈现组件

Question

我试图使用useEffect和传递依赖项重新呈现一个组件，但它不起作用。我对响应钩子非常陌生，所以我认为我可能没有传递正确的依赖关系。我正在获取一些信息并更新状态，但是，当我传递依赖项时，重新呈现周期不会发生。

以下是代码：

import React, { useRef, useState, useEffect } from "react";

import Loader from "../UI/loader/loader";

import axios from "axios";
import "./surveybox.css";

interface surveryAnswer {
  id: number;
  answers: string[];
}

const SurveyBox: React.FC = () => {
  const [surveyUserAnswers, setSurveyUserAnswers] = useState<surveryAnswer>();
  const [loading, setLoading] = useState(false);
  const [numberOfAnswers, setNumberOfAnswers] = useState<number>();

  const programmingQRef = useRef<HTMLSelectElement>(null);
  const skillsQRef = useRef<HTMLSelectElement>(null);
  const stateManagementQRef = useRef<HTMLSelectElement>(null);
  const programmerTypeQRef = useRef<HTMLSelectElement>(null);

  useEffect(() => {
    axios
      .get(`${DB_URL}/users-answers.json`)
      .then((res) => {
        const fetchedAnswers = [];
        for (let item in res.data) {
          fetchedAnswers.push({
            ...res.data[item],
            id: item,
          });
        }
        setNumberOfAnswers(fetchedAnswers.length);
      })
      .catch((err) => {});
  }, [numberOfAnswers, setNumberOfAnswers]);

  const onSubmitSurvey = (e: React.FormEvent): void => {
    e.preventDefault();
    setLoading((prevLoading) => !prevLoading);
    const newAnswer = {
      id: Math.random(),
      answers: [
        programmerTypeQRef.current!.value,
        skillsQRef.current!.value,
        stateManagementQRef.current!.value,
        programmerTypeQRef.current!.value,
      ],
    };

    setSurveyUserAnswers(newAnswer);

    axios
      .post(`${DB_URL}/users-answers.json`, newAnswer)
      .then((res) => {
        setLoading((prevLoading) => !prevLoading);
      })
      .catch((error) => {
        console.log(error);
        setLoading((prevLoading) => !prevLoading);
      });
  };

  return (
    <div className="surveybox-container">
      {loading ? (
        <div className={"loader-holder"}>
          <Loader />
        </div>
      ) : (
        <React.Fragment>
          <h2>Quick survey!</h2>
          <form action="submit" onSubmit={onSubmitSurvey}>
            <label>favorite programming framework?</label>
            <select ref={programmingQRef} name="programming">
              <option value="React">React</option>
              <option value="Vue">Vue</option>
              <option value="Angular">Angular</option>
              <option value="None of the above">None of the above</option>
            </select>
            <br></br>
            <label>what a junior developer should have?</label>
            <select ref={skillsQRef} name="skills">
              <option value="Eagerness to lear">Eagerness to learn</option>
              <option value="CS Degree">CS Degree</option>
              <option value="Commercial experience">
                Commercial experience
              </option>
              <option value="Portfolio">Portfolio</option>
            </select>
            <br></br>
            <label>Redux or Context Api?</label>
            <select ref={stateManagementQRef} name="state-management">
              <option value="Redux">Redux</option>
              <option value="Context Api">Context Api</option>
            </select>
            <br></br>
            <label>Backend, Frontend, Mobile?</label>
            <select ref={programmerTypeQRef} name="profession">
              <option value="Back-end">back-end</option>
              <option value="Front-end">front-end</option>
              <option value="mobile">mobile</option>
            </select>
            <br></br>
            <button type="submit">submit</button>
          </form>
          <p>answered by {numberOfAnswers} visitors</p>
        </React.Fragment>
      )}
    </div>
  );
};

我正在传递与useEffect和更改相关的两个依赖项，但仍然无法工作。

谢谢!

建议后编辑的解决方案：

...
interface surveryAnswer {
  id: number;
  answers: string[];
}

const SurveyBox: React.FC = () => {
  const [surveyUserAnswers, setSurveyUserAnswers] = useState<surveryAnswer>();
  const [loading, setLoading] = useState(false);
  const [numberOfAnswers, setNumberOfAnswers] = useState<number>(0);

  const programmingQRef = useRef<HTMLSelectElement>(null);
  const skillsQRef = useRef<HTMLSelectElement>(null);
  const stateManagementQRef = useRef<HTMLSelectElement>(null);
  const programmerTypeQRef = useRef<HTMLSelectElement>(null);

  const fetchAnswersFromServer = () => {
    axios
      .get(`${DB_URL}/users-answers.json`)
      .then((res) => {
        const fetchedAnswers = [];
        for (let item in res.data) {
          fetchedAnswers.push({
            ...res.data[item],
            id: item,
          });
        }
        setNumberOfAnswers(fetchedAnswers.length);
      })
      .catch((err) => {});
  };

  const onSubmitSurvey = (e: React.FormEvent): void => {
    e.preventDefault();
    setLoading((prevLoading) => !prevLoading);
    const newAnswer = {
      id: Math.random(),
      answers: [
        programmerTypeQRef.current!.value,
        skillsQRef.current!.value,
        stateManagementQRef.current!.value,
        programmerTypeQRef.current!.value,
      ],
    };

    setSurveyUserAnswers(newAnswer);

    axios
      .post(`${DB_URL}/users-answers.json`, newAnswer)
      .then((res) => {
        fetchAnswersFromServer();
        setLoading((prevLoading) => !prevLoading);
      })
      .catch((error) => {
        console.log(error);
        setLoading((prevLoading) => !prevLoading);
      });
  };

  return (...

Answer 1

您可能只想只进行一次HTTP调用(当组件挂载时)，所以使用[]作为依赖列表。HTTP调用不依赖于任何其他道具或状态，因此这很可能是您想要的。

如果希望它更频繁地运行，那么您需要决定哪些数据更改需要再次进行HTTP调用，并将其添加到依赖项列表中，而不是numberOfAnswers或setNumberOfAnswers。

问题在于，您的效果将numberOfAnswers作为依赖项列出，并且它在运行时还会更新numberOfAnswers。所以，这可能是正在发生的事情：

组件挂载的

• 。默认情况下，numberOfAnswers是未定义的。
• 的效果是第一次运行。
• 返回HTTP请求，比如有10个答案。它调用具有numberOfAnswers=10
• The效果的numberOfAnswers=10
• The组件重发器，因为numberOfAnswers更改了。
• HTTP请求返回，可能具有相同的10个答案。它调用setNumberOfAnswers(10)
• The组件不会再次重命名，因为值没有更改。

Answer 2

问题

numberOfAnswers似乎不是一个依赖项，因为它在效应回调中没有引用，其次，无条件地调用setNumberOfAnswers来更新numberOfAnswers可能会创建一个无限循环。我怀疑这种效果在挂载上运行一次，更新状态并运行第二次，然后再次将状态更新为相同的值，然后不再更新，因为状态是相同的值。

解决方案

所以我想每次有一个新的提交时重新呈现。

您可以在正在更新的useEffect上触发surveyUserAnswers。

补充建议：

1. 不需要创建一个新数组并将元素推入其中，只需计算答案的数量。如果数组使用res.data.length，如果是res.data.length，则使用Object.values(res.data).length切换加载状态，启动异步加载操作时，只需将其设置为true，并使用finally块清除加载状态，而不管承诺是否已解决或拒绝。

代码：

const SurveyBox: React.FC = () => {
  const [surveyUserAnswers, setSurveyUserAnswers] = useState<surveryAnswer>();
  const [loading, setLoading] = useState(false);
  const [numberOfAnswers, setNumberOfAnswers] = useState<number>();

  const programmingQRef = useRef<HTMLSelectElement>(null);
  const skillsQRef = useRef<HTMLSelectElement>(null);
  const stateManagementQRef = useRef<HTMLSelectElement>(null);
  const programmerTypeQRef = useRef<HTMLSelectElement>(null);

  useEffect(() => {
    axios
      .get(`${DB_URL}/users-answers.json`)
      .then((res) => {
        setNumberOfAnswers(res.data.length); // or Object.values(res.data).length
      })
      .catch((err) => {});
  }, [surveyUserAnswers]);

  const onSubmitSurvey = (e: React.FormEvent): void => {
    e.preventDefault();
    setLoading(true);
    const newAnswer = {
      id: Math.random(),
      answers: [
        programmerTypeQRef.current!.value,
        skillsQRef.current!.value,
        stateManagementQRef.current!.value,
        programmerTypeQRef.current!.value,
      ],
    };

    setSurveyUserAnswers(newAnswer);

    axios
      .post(`${DB_URL}/users-answers.json`, newAnswer)
      .then((res) => {
        // handle any processing
      })
      .catch((error) => {
        console.log(error);
        // handle any other error processing
      })
      .finally(() => setLoading(false));
  };

替代解

定义onSubmitSurvey async并通过await处理所有异步逻辑，并完全删除useEffect钩子。

  const onSubmitSurvey = async (e: React.FormEvent): void => {
    e.preventDefault();
    setLoading(true);
    const newAnswer = {
      id: Math.random(),
      answers: [
        programmerTypeQRef.current!.value,
        skillsQRef.current!.value,
        stateManagementQRef.current!.value,
        programmerTypeQRef.current!.value,
      ],
    };

    setSurveyUserAnswers(newAnswer);

    try {
      await axios.post(`${DB_URL}/users-answers.json`, newAnswer);
      const res = await axios.get(`${DB_URL}/users-answers.json`);
      setNumberOfAnswers(res.data.length); // or Object.values(res.data).length
    } catch(error) {
      console.log(error);
      // handle any other error processing
    } finally {
      setLoading(false);
    }
  };