使用 contextAPI 和 React 通过异步函数设置 useState 的初始值

Question

我对反应还很陌生，我一直在努力了解如何解决这个问题。我将整个上下文包裹起来 API 然后我使用该值来检查用户是否已登录。但是由于 HOC，const loggedIn 的初始值已经在请求被获取之前呈现从服务器。当程序启动时，我得到 undefined 并且我明白为什么我得到但不知道如何修复它。我研究了很多，但没有找到明确的解决方案。

function AuthContextProvider(props) {
    const [loggedIn, setLoggedIn] = useState(undefined);

    async function getLoggedIn() {
        const loggedInRes = await Axios.get("http://localhost:5000/api/users/loggedIn");
        setLoggedIn(loggedInRes.data);
    }
    useEffect(() => {
        getLoggedIn();
    }, []);

    return (
        <AuthContext.Provider value={{ loggedIn, getLoggedIn }}>
            {props.children}
        </AuthContext.Provider>
    )
}

我现在的问题是如何在我的程序呈现之前设置此 const loggedIn 的初始值。

Answer 1

我觉得你的想法很好，你只需要等待登录就绪再渲染即可：

function AuthContextProvider(props) {
const [loggedIn, setLoggedIn] = useState(undefined);

async function getLoggedIn() {
    const loggedInRes = await Axios.get("http://localhost:5000/api/users/loggedIn");
    setLoggedIn(loggedInRes.data);
}
useEffect(() => {
    getLoggedIn();
}, []);

if (!loggedIn) {
   return (
      <AnotherComponentThatDontRequireAuthentication />
   );
}

return (
    <AuthContext.Provider value={{ loggedIn, getLoggedIn }}>
        {props.children}
    </AuthContext.Provider>
)

}

Answer 2

结果代码

function AuthContextProvider(props) {
    const [loggedIn, setLoggedIn] = useState(undefined);
    const [isLoading, setIsLoadig] = useState(true);

    useEffect(() => {
        Axios.get("http://localhost:5000/api/users/loggedIn").then((response) => {
            setLoggedIn(response.data);
            setIsLoadig(false);
        });
    }, [loggedIn]);

    if (isLoading) {
        return < div > App is isLoading</div >;
    }
    return (
        <AuthContext.Provider value={{ loggedIn, getLoggedIn }}>
            {props.children}
        </AuthContext.Provider>
    )
}

使用 contextAPI 和 React 通过异步函数设置 useState 的初始值

Setting the initial value of useState with async function using contextAPI and React

reactjs

react-context

use-state