react 如何定时刷新组件

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 854 天前的主题，其中的信息可能已经有所发展或是发生改变。

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 条回复 • 2021-12-17 18:15:58 +08:00

noe132

2021-12-17 11:37:19 +08:00

setTimeout / setInterval

lvdb

2021-12-17 13:11:10 +08:00 via Android

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

br_wang

2021-12-17 17:44:48 +08:00

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

baolinliu442k

2021-12-17 18:15:58 +08:00

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