Я пытаюсь сделать 2 вызова HTTP внутри компонента React, который затем вызовет сеттеры для 2 свойств, определенных с помощью useState. Я следовал тому, что считал правильным, чтобы предотвратить бесконечный повторный рендеринг, но это все еще происходит. Вот мой код:
function Dashboard({ history = [] }) {
const [teamInfo, setTeamInfo] = useState(null);
const [survey, setSurvey] = useState(null);
const [open, setOpen] = useState(false);
const user = getUser();
const getSurveyHandler = async () => {
const surveyResponse = await getSurveys('standard');
setSurvey(surveyResponse.data);
};
const getTeamInfoHandler = async () => {
const teamInfoResponse = await getTeamInfo(user.teamId);
setTeamInfo(teamInfoResponse);
};
useEffect(() => {
document.body.style.backgroundColor = '#f9fafb';
getSurveyHandler();
getTeamInfoHandler();
}, [survey, teamInfo]);
Как видите, я определил функции вне useEffect и передал две переменные состояния в массив зависимостей, который будет проверяться, чтобы предотвратить бесконечный повторный рендеринг. Кто-нибудь может понять, почему это все еще происходит?
Спасибо
Вы устанавливаете survey
и teamInfo
в своих функциях с зависимостью от них в вашем useEffect
.
useEffect
запускается каждый раз при изменении зависимости. Вы устанавливаете их, вызывая ререндеринг. Поскольку они изменились, useEffect
запускается снова, устанавливая их снова. Цикл продолжается.
Вам нужно удалить те.
useEffect(() => {
document.body.style.backgroundColor = '#f9fafb';
getSurveyHandler();
getTeamInfoHandler();
}, []);
Единственное, что рекомендуется, — это перемещать функции async
внутрь useEffect
, если только вам не нужно вызывать их из других мест компонента.
useEffect(() => {
const getSurveyHandler = async () => {
const surveyResponse = await getSurveys('standard');
setSurvey(surveyResponse.data);
};
const getTeamInfoHandler = async () => {
const teamInfoResponse = await getTeamInfo(user.teamId);
setTeamInfo(teamInfoResponse);
};
document.body.style.backgroundColor = '#f9fafb';
getSurveyHandler();
getTeamInfoHandler();
}, []);
Понятно. Спасибо. Я новичок в React (пришел из Angular), поэтому для меня все совершенно новое!
Не беспокойтесь, это займет минуту, чтобы обернуть вокруг себя голову. Я сам имел дело с несколькими бесконечными циклами.
Говоря это. Я изменил код, как вы предложили, и у меня все еще возникает проблема :( есть ли что-то еще, что может быть ее причиной?
Вы перестроили, чтобы убедиться, что он не запускает старый код. Если в вашем массиве зависимостей ничего нет, он должен запускаться только один раз.
У вас есть пустой массив для зависимостей? Если вы опустите его, то он будет работать при каждом рендеринге.
Понятно! Возврат пустого массива обратно исправил его. Спасибо !
Отлично, это еще одна вещь, которую мне пришлось выяснить на собственном горьком опыте. Отсутствие массива означает запуск при каждом рендеринге, пустой массив означает запуск только при первом рендеринге.
переменная состояния в массиве зависимостей, вызывающая здесь бесконечный рендеринг.