Fetch в react бесконечно отправляет запросы

Question

Внизу код. По сути fetch только в начале один раз должен вызывться из-за useEffect, но в консоли он бесконечно крутится и спокойно берет данные. В чем ошибка?

import React ,{useState,useEffect} from 'react';
import {useParams} from 'react-router-dom'
function Clan(){ 
  const [clan, setClan] = useState([]);
  let {tag} =  useParams(); 
  var formData = new FormData();
  
  useEffect(() => {
    formData.append('tag', tag);

    fetch('http://localhost:8000/clan.php', {
    method: 'POST',
    body: formData 
    }).then(response => response.json()).then(res => setClan(res));
  })
  
  return (
    <div className='clan'>
      <div className='main_title'> Клан <br/><span>dj</span> </div>
      <div className='clan_logo'><img src='j' alt='Clan logo'></img></div>
    </div>
  );
}
export default Clan

Answer 1

useEffect без второго параметра будет вызывать callback при каждом рендере.

Таким образом, сейчас, внутри коллбэка вызывается setClan, заново запускается рендер и заново запускается fetch.

Если нужно чтобы callback вызывался в зависимости от чего-либо нужно передать второй параметр: массив зависимостей.

Если нужно выполнить callback один раз - параметр должен быть пустым массивом.

В данном случае, выполнение зависит от tag, поэтому его стоит поместить в зависимости, а создание formData - внести внутрь коллбэка:

useEffect(() => {
    var formData = new FormData();
    formData.append('tag', tag);

    fetch('http://localhost:8000/clan.php', {
    method: 'POST',
    body: formData 
    }).then(response => response.json()).then(res => setClan(res));
}, [tag])

БЛОГ НА HUSL

Fetch в react бесконечно отправляет запросы

Ответы (1 шт):