react 如何定时刷新组件

This topic created in 1632 days ago, the information mentioned may be changed or developed.

const Posts = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const getPosts = async () => {
      const resp = await fetch(API);
      const postsResp = await resp.json();
      setPosts(postsResp);
    };

    getPosts();
  }, []);

  return '';
};

export default Posts;

如何定时刷新 posts 的数据？

4 replies • 2021-12-17 18:15:58 +08:00

noe132

Dec 17, 2021

setTimeout / setInterval

mx8Y3o5w3M70LC4y

Dec 17, 2021 via Android

你这个 getposts 如果其他地方没用到，是不需要定义的，直接 async()=>{...}()

br_wang

Dec 17, 2021

1. 定义一个 state ，比如 refreshCount;
2. refreshCount 并声明为 effect 的依赖，利用 setRefreshCount 变更 refreshCount 值触发 effect 重新执行;
3. 可以 setTimeout 或 setInterval ，周期性调用 setRefreshCount 实现刷新；
4. 也可以把 setRefreshCount 绑到按钮上，手动触发刷新；
5. 注意竞速问题。

baolinliu442k

Dec 17, 2021

setTimeOut(()->{
getPosts();
}, time)