Автообновление sh JSON данных за заданный интервал в React Native с использованием React Hooks

Question

Я работаю над приложением React Native для радиостанции, которое отображает информацию о песне и исполнителе по ссылке JSON. Как я могу получить информацию для обновления / выборки каждую минуту или около того? Я пробовал несколько вариантов использования setInterval, но не могу заставить его работать в моем функциональном компоненте. Я предполагаю, что это потому, что я пытаюсь использовать setInterval с функцией asyn c ..? Заранее спасибо!

  const [track, setTrack] = useState({});

  async function fetchData() {
    const res = await fetch(" my API url ");
    res
      .json()
      .then(res => setTrack(res.data[0].track.title))
      .catch(err => setErrors(err));
  }

  useEffect(() => {
      fetchData();
  });

<Text>{track}</Text>

Answer 1

Вы можете использовать setTimeout для запроса каждого N периода времени после первого монтирования компонента, например:

import React from 'react';

const Component = () => {
    const [track, setTrack] = React.useState('');

    React.useEffect(() => {
        let repeat;

        async function fetchData() {
            try {
                const res = await fetch(" my API url ");
                const json = await res.json();

                setTrack(json.data[0].track.title);

                repeat = setTimeout(fetchData, 60000); // request again after a minute
            } catch (error) {
                console.error(error.message)
            }
        }

        fetchData();

        return () => {
            if (repeat) {
                clearTimeout(repeat);
            }
        }
    }, []);

    return (
        <Text>{track}</Text>
    );
};