Question

我正在使用 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 查询返回数据。

Answer 1

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

useEffect 无限循环刷新数据

1 个答案: