useEffect 无限循环刷新数据答案

【问题标题】：useEffect infiniteloop refreshing datauseEffect 无限循环刷新数据
【发布时间】：2021-04-01 19:02:08
【问题描述】：

我正在使用 useEffect 和 useState 从异步函数中获取数据。每次播放列表状态发生变化时，我都会调用这个 useEffect 。这真的很低效，因为我的代码经历了一个无限循环，我不能控制台记录任何东西。但是，我希望能够在不刷新页面的情况下更新数据，所以这是我的逻辑。有没有更有效的方法来执行此操作并在不刷新页面的情况下获取数据。我不想每次都调用 onMount([])，因为我必须刷新。

const [playlists, getPlaylists] = useState([])

useEffect(()=>{
    let mounted = true
    GetUserPlaylists().then(data => {
            if (mounted){
                getPlaylists(data)
                }
            })
    return () => {mounted = false};
},[playlists])

async function GetUserPlaylists() {
    var user = await Auth.currentAuthenticatedUser()
    user = user.attributes.email
    try{
    const playlists = await API.graphql(graphqlOperation(queries.getUserPlaylist, {id: user}))
    return playlists.data.getUser.playlists.items
    } catch(err){
        console.log(err)
    }
}

export default GetListenerPlaylists

我的 getUserPlaylists 函数从 Amplify GraphQL 查询返回数据。

【问题讨论】：

只需将播放列表作为道具传递。 GetUserPlaylists() 的结果究竟如何变化？
您需要以其他方式更新状态。只需每五秒左右查询一次 API。还是每分钟？无论如何，请改用setInterval()。

标签： javascript reactjs use-effect use-state

【解决方案1】：

您似乎需要阅读更多有关 useEffect 和 useState 工作原理的信息。编码中的第一个命名很重要。您可以随心所欲地命名 setter 函数，但由于它是通过将其命名为 getPlaylist 来设置状态的，因此您只会让自己和将来的其他开发人员感到困惑。通过证明 useEffect 的播放列表参数，您告诉 react 重新运行 useEffect 中的函数，并通过更改 useEffect 回调中的播放列表，您将获得一个无限循环。要解决您的问题，您必须在 useEffect 中进行网络调用（获取请求）并满足实时功能，想到的最简单的方法是设置一个 setInterval 并每 N 秒轮询一次 API。最后摆脱 useEffect 函数的播放列表参数，因为当您更改组件的状态时，您的组件会重新渲染。

【讨论】：