【发布时间】：2021-07-23 06:00:16
【问题描述】：
我正在尝试使用 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 (...
【问题讨论】：
-
你是如何验证效果没有运行的？每个效果在安装后至少运行一次。此外，您设置它的方式将在您改变触发效果本身的效果的值时重复获取新数据。
-
numberOfAnswers似乎不是依赖项，因为它没有在效果回调中引用，其次，无条件调用setNumberOfAnswers来更新numberOfAnswers可能会创建一个无限循环。我怀疑这种效果在挂载时运行一次，更新状态并第二次运行，然后再次将状态更新为相同的值，然后再也不会更新，因为状态是相同的值。你想触发什么效果？您希望何时进行提取？ -
useEffect() 运行但不会重新运行。我想重新获取数据，以便更新回答调查的用户数量。所以我想每次有新的提交时都重新渲染。我实际上不再确定逻辑了
标签： reactjs typescript react-hooks use-effect