gpt4 book ai didi

javascript - react / react 上下文 API : Wait for context values when using useEffect() hook

转载 作者:行者123 更新时间:2023-12-04 12:05:47 33 4
gpt4 key购买 nike

我正在使用 React 开发一个 Web 应用程序,这就是我想要做的:

  • 在最高阶组件中,检查用户是否已登录,如果已登录,则更新 'userinfo' 上下文值。
  • 在 Profile.js 中,获取 'userinfo' 上下文值。
  • 检查'userinfo'是否为空,并相应地调用不同的API。

  • 我写了下面的代码。问题在于,将 userinfo 上下文值传递给组件显然存在时间滞后。所以当使用 useEffect() hook 时,当 userinfo 不为 null 时 Profile.js 会渲染两次。

    有没有办法修复此代码,使其等待“userinfo”变量,然后相应地调用相关 API,而不是之前?

    下面是代码。有什么建议吗?提前非常感谢!
    import React, {useEffect, useContext} from 'react';
    import Userinfo from "../context/Userinfo";


    function Profile(props) {

    const {userinfo, setuserinfo}=useContext(Userinfo);

    useEffect(()=>{
    ((userinfo==null)?
    /*API call A (When user is not logged in) */ :
    /*API call B (When user is logged in) */
    )},[userinfo])

    return (
    (userinfo==null)?
    /*Elements to render when user is not logged in) */ :
    /*Elements to render when user is logged in) */
    );
    }

    export default Profile;

    最佳答案

    这里最好的解决方案是在上下文提供程序中添加一个加载状态,一旦值更新就会重置。

    function Profile(props) {

    const {userinfo, loading, setuserinfo}=useContext(Userinfo);

    useEffect(()=>{
    if(!loading) {
    ((userinfo==null)?
    /*API call A (When user is not logged in) */ :
    /*API call B (When user is logged in) */
    )
    }
    )},[loading, userinfo])

    if(loading) return <Loader />
    return (
    (userinfo==null)?
    /*Elements to render when user is not logged in) */ :
    /*Elements to render when user is logged in) */
    );
    }

    关于javascript - react / react 上下文 API : Wait for context values when using useEffect() hook,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61479097/

    33 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com