Реагировать на бесконечный цикл при совершении HTTP-вызовов с использованием useEffect

Я пытаюсь сделать 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 и передал две переменные состояния в массив зависимостей, который будет проверяться, чтобы предотвратить бесконечный повторный рендеринг. Кто-нибудь может понять, почему это все еще происходит?

Спасибо

переменная состояния в массиве зависимостей, вызывающая здесь бесконечный рендеринг.

Nilesh Patel 20.12.2020 16:59
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
1
95
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы устанавливаете 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), поэтому для меня все совершенно новое!

James 20.12.2020 17:03

Не беспокойтесь, это займет минуту, чтобы обернуть вокруг себя голову. Я сам имел дело с несколькими бесконечными циклами.

Todd Skelton 20.12.2020 17:04

Говоря это. Я изменил код, как вы предложили, и у меня все еще возникает проблема :( есть ли что-то еще, что может быть ее причиной?

James 20.12.2020 17:05

Вы перестроили, чтобы убедиться, что он не запускает старый код. Если в вашем массиве зависимостей ничего нет, он должен запускаться только один раз.

Todd Skelton 20.12.2020 17:06

У вас есть пустой массив для зависимостей? Если вы опустите его, то он будет работать при каждом рендеринге.

Todd Skelton 20.12.2020 17:38

Понятно! Возврат пустого массива обратно исправил его. Спасибо !

James 20.12.2020 17:56

Отлично, это еще одна вещь, которую мне пришлось выяснить на собственном горьком опыте. Отсутствие массива означает запуск при каждом рендеринге, пустой массив означает запуск только при первом рендеринге.

Todd Skelton 20.12.2020 18:05

Другие вопросы по теме