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 вызывается только дважды. Почему это происходит?
Ответы 2
Вам нужно передать объект data в качестве массива зависимостей в useEffect()
useEffect(() => {
...your code
}, [data]);
Это не отвечает на вопрос, почему код OP не заканчивается бесконечным циклом. Состояние data также не используется в useEffect(), поэтому нет особого смысла передавать его как зависимость. (обратите внимание, что data исходит из обратных вызовов, а не из внешней переменной области видимости data)
Данные те же, что и при втором вызове setData, поэтому:
- react не перерисовывает ваш компонент, поэтому
- эффект не работает, следовательно
- нет бесконечного цикла.
Вы, вероятно, увидели бы бесконечный цикл, если бы не упорядочивали данные.
да, если я не преобразую данные в строку (setData(data)) и использую их строковую версию в теге <p> (<p>{JSON.stringify(data)}</p>), на самом деле это идет в бесконечный цикл. Итак, можно ли с уверенностью сказать, что useState не будет повторно отображать компонент, если данные, которые он получает, будут такими же в следующий раз (предполагая такой вариант использования)?
Так работает React, но я бы не стал писать код, зависящий от этого предположения.
Если он перерисовывается всего дважды, вероятно, ваша выборка выдает исключение после нескольких попыток, и вы не улавливаете ошибку. Добавьте блок .catch().