React useEffects с setData не попадает в бесконечный цикл?

const [resourceType, setResourceType] = useState("posts");
const [data, setData] = useState("");
useEffect(() => {
   console.log("use effects called: " + resourceType);
   fetch(`https://jsonplaceholder.typicode.com/${resourceType}`)
     .then((result) => {
         return result.json().then((data) => {
             return {
                 data: data,
                 response: result.status,
             };
         });
         //JSON.parse(result);
     })
     .then((data) => {
         console.log("here");
         setData(JSON.stringify(data));
         console.log(data);
     });
});   
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

У меня есть приведенный выше код, который извлекает фиктивные данные из URL-адреса заполнителя JSON, а затем обновляет переменную данных (setData(JSON.stringify(data))). Мой вопрос в том, что эта реализация должна войти в бесконечный цикл в соответствии с моим пониманием хука реакции useEffect и useState. Вот что, я думаю, должно произойти: страница отображает ее, вызывает useEffect, обновляет переменную данных, что вызывает повторную визуализацию компонента, который должен снова вызывать useEffect, следовательно, повторно воспроизводит компонент, и цикл продолжается. Но этого не происходит, и useEffect вызывается только дважды. Почему это происходит?

Если он перерисовывается всего дважды, вероятно, ваша выборка выдает исключение после нескольких попыток, и вы не улавливаете ошибку. Добавьте блок .catch().

Cesare Polonara 10.04.2022 02:35
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
1
47
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вам нужно передать объект data в качестве массива зависимостей в useEffect()

useEffect(() => {
   ...your code
}, [data]);

Это не отвечает на вопрос, почему код OP не заканчивается бесконечным циклом. Состояние data также не используется в useEffect(), поэтому нет особого смысла передавать его как зависимость. (обратите внимание, что data исходит из обратных вызовов, а не из внешней переменной области видимости data)

Nick Parsons 10.04.2022 10:03
Ответ принят как подходящий

Данные те же, что и при втором вызове setData, поэтому:

  • react не перерисовывает ваш компонент, поэтому
  • эффект не работает, следовательно
  • нет бесконечного цикла.

Вы, вероятно, увидели бы бесконечный цикл, если бы не упорядочивали данные.

да, если я не преобразую данные в строку (setData(data)) и использую их строковую версию в теге <p> (<p>{JSON.stringify(data)}</p>), на самом деле это идет в бесконечный цикл. Итак, можно ли с уверенностью сказать, что useState не будет повторно отображать компонент, если данные, которые он получает, будут такими же в следующий раз (предполагая такой вариант использования)?

prashantbhatt23 10.04.2022 03:41

Так работает React, но я бы не стал писать код, зависящий от этого предположения.

ray hatfield 10.04.2022 03:44

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