问题

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 个答案。它调用 setNumberOfAnswers(10)
组件使用 numberOfAnswers=10 重新渲染
效果再次运行，因为 numberOfAnswers 发生了变化。
HTTP 请求返回，可能有 10 个相同的答案。它调用 setNumberOfAnswers(10)
该组件不再重新渲染，因为值没有改变。

Answer 2

问题

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

解决方案

<块引用>

所以我想每次有新提交时都重新渲染。

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

其他建议：

无需创建新数组并将元素推入其中即可计算答案的数量。如果是数组，则使用 res.data.length，如果是对象，则使用 Object.values(res.data).length。
不要切换加载状态，只需在启动异步加载操作时设置为 true，并使用 finally 块清除加载状态，无论 Promise 是解决还是拒绝。

代码：

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

useEffect 依赖项不会重新渲染组件

2 个答案:

问题

解决方案

替代方案