Вызов Ax ios дает бесконечный цикл - PullRequest
0 голосов
/ 10 июля 2020

Мне нужно получить некоторые данные и установить состояние, но это дает мне бесконечное l oop, и я не знаю, как это исправить.

пример в моем Routes.tsx:

// get all posts
    useEffect(() => {
        Axios.get('/api/posts', config)
            .then(res => setAllPosts(res.data))
            .catch(err => console.log(err))
    }, [config]);

если я не поставлю 'config' в зависимость, он будет показывать результаты только по refre sh, но тогда он не даст мне бесконечного l oop.

вот мой проект: https://github.com/marinavrataric/social_network

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Попробуйте использовать useStata [] с useEffect []

   const [data, setData] = useState({ hits: [] });
     
      useEffect(async () => {
        const result = await axios.get('/api/posts', config)
            .then(res => setAllPosts(res.data))
            .catch(err => console.log(err))
     
        setData(result);
      }, []);
     
      return (
        <ul>
          {data.posts.map(item => (
// stuff
          ))}
        </ul>
      );
0 голосов
/ 10 июля 2020

Поскольку вы вызываете свой API в useEffect, а также обновляете состояние в useEffect, и useEffect без зависимости вызывается каждый раз при рендеринге компонента, поэтому вот вызов l oop:

** useEffect> call API> обновление состояния с помощью setState>, поскольку состояние обновлено, вызовите useEffect **

Таким образом, вам нужно добавить зависимость для useEffect, которая не изменяется с помощью setState. И затем, всякий раз, когда значение зависимого изменяется, будет вызываться API.

Кстати, лучше не реализовывать вызов API в useEffect. Скорее вам следует попробовать использовать readux и thunk.

...