Question

每当用户创建新帖子时，我都试图从api获取数据。而且我知道，如果您想在数据更改时发出请求，可以使用以下方法：

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

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

    }, [tweets])

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

Answer 1

问题是useEffect依赖项[tweets]：

根据您的代码，只要useEffect发生更改，它就会调用tweets，

在useEffect内部，您正在更新它，所以

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

解决方案：

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

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

unmount只是为了避免出现“无法在已卸载的组件上执行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发生了变化，因此该函数开始运行，获取新的tweet，然后重新运行。那是无限循环。

使用useEffect从React中的api获取数据

2 个答案: