0

Estou tentando usar useEffect para uma simples função, mas da erro. Ele não está atualizando a página e salvando a requisição que faço com a função loadAll no useState. Quando carrego a página o resultado de storeInfo é o null que é o valor default e não o valor atualizado.

Dá o aviso de dependência ( React Hook useEffect has a missing dependency: 'storeInfo'. Either include it or remove the dependency array react-hooks/exhaustive-deps )

  const [storeInfo, setStoreInfo] = useState(null);

  useEffect(()=>{
    const loadAll = async () => {
      let chosenInfo = await Tmdb.getStoreById(635302);
      setStoreInfo(chosenInfo);
    }
    console.log(storeInfo)
    loadAll();
  }, []);

Se eu coloco storeInfo no array de dependência como pede fica em loop infinito.

  const [storeInfo, setStoreInfo] = useState(null);

  useEffect(()=>{
    const loadAll = async () => {
      let chosenInfo = await Tmdb.getStoreById(635302);
      setStoreInfo(chosenInfo);
    }
    console.log(storeInfo)
    loadAll();
  }, [storeInfo]);

Não sei mais o que fazer :( Se alguém conseguir me ajudar, ficarei grato!

1 Resposta 1

3
  const [storeInfo, setStoreInfo] = useState(null);

  useEffect(()=>{
    const loadAll = async () => {
      let chosenInfo = await Tmdb.getStoreById(635302);
      setStoreInfo(chosenInfo);
    }
    console.log(storeInfo)
    loadAll();            <=== esta parte modifica o storeInfo
  }, [storeInfo]);        <=== esta parte faz a useEffect rodar quando a referencia do storeInfo muda

Sugestões:

  • Caso você não precise do storeInfo no useEffect, remova do console.log e do dependency array;

  • Caso você precise do storeInfo no useEffect, pode accesar dentro do setStoreInfo:

    setStoreInfo(currentStoreInfo =>({ ...currentStoreInfo, ...chosenInfo}));

  • Caso você precise do storeInfo no useEffect em geral, coloque o storeInfo numa useRef():


const storeInfoRef = useRef()

useEffect(() => { storeInfoRef.current = storeInfo  }, [storeInfo]}

useEffect(()=>{
  const loadAll = async () => {
    let chosenInfo = await Tmdb.getStoreById(635302);
    setStoreInfo(chosenInfo);
  }
  console.log(storeInfoRef.current)
  loadAll();            <=== esta parte modifica o storeInfo
}, [storeInfoRef]);     <=== referencia do storeInfoRef nao vai mudar, so o do storeInfoRef.current, que nao vai rodar o useEffect


Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .