时间戳

首页 > 解决方案 > 使用 React Hooks 在 React Native 中按设定的时间间隔自动刷新 JSON 数据

javascript - 使用 React Hooks 在 React Native 中按设定的时间间隔自动刷新 JSON 数据

问题描述

我正在为一个广播电台开发一个 React Native 应用程序，它显示来自 JSON url 的歌曲和艺术家信息。如何获取每分钟左右更新/获取的信息？我尝试了一些使用 setInterval 的变体，但似乎无法让它在我的功能组件中工作。我猜这是因为我试图将 setInterval 与异步函数一起使用..？提前致谢！

  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>

标签： javascriptjsonreactjsreact-nativereact-hooks

解决方案

您可以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>
    );
};

推荐阅读