Question

使用 useEffect 从 api 获取数据

2020-06-09

244

javascript reactjs

每次用户创建新帖子时，我都会尝试从 API 中获取数据。我知道，如果您想在数据更改时发出请求，可以使用以下方法：

 const [tweets, setTweets] = useState([])

    useEffect(() => {
       api.get('tweets').then(response => setTweets(response.data))
       
    }, [tweets])

它可以工作，我无需刷新页面即可查看已创建的新帖子。但是，当我转到应用程序中的“检查”，然后转到“网络”时，我可以看到发生了无数的 GET 请求，即使我指定仅在数组更改时才调用。有人可以告诉我如何解决它吗？（我不知道这是正常现象还是我需要担心的事情）

Answer 1

问题是 useEffect 依赖项 [tweets] :

因此，根据您的代码，只要 tweets 发生变化，它就会调用 useEffect ，

在 useEffect 内部您正在更新它，因此

useEffect --> setTweets --> useEffect --> setTweets --> ....

解决方案：

useEffect(() => {
       api.get('tweets').then(response => setTweets(response.data))
//}, [tweets]) // <--- remove tests from here
}, [])

根据评论，您可以执行以下操作：

卸载只是为了避免出现“无法对未安装的组件执行 React 状态更新”的错误。

useEffect(() => {
    let unmounted = false; 
    const timer = setInterval(() => {
       api.get('tweets').then(response => { 
           // you can compare the current tweets with new also and update state only after that
           if(!unmounted)
                setTweets(response.data)
       })
    },5000)
    return () => { 
        unmounted = true;
        clearInterval(timer);
    }
}, [])

Answer 2

从依赖项数组中删除 tweets ：

useEffect(() => {
       api.get('tweets').then(response => setTweets(response.data))

    }, [])

该数组表示“只要这些值之一发生变化，就重新运行该函数”。因此，该函数会运行，获取新推文，然后因为 tweets 发生变化而重新运行；这就是无限循环。