时间戳

首页 > 解决方案 > 上下文正在更新状态，但在第二次尝试

javascript - 上下文正在更新状态，但在第二次尝试

问题描述

const {user, setUser} = useContext(UserContext);
const {auth, setAuth} = useContext(AuthContext);

  const handleSubmit = async (e) => {
    e.preventDefault();
    //axios request to the backend
    const url = 'http://localhost:5000/home';
    await axios.post(url, userData)
      .then((res) => {
        let ok = res.data.Authenticated;
        if (ok) {
          setAuth(true);
          setUser(userData);
          console.log("its ok");
        }
        else {
          setAuth(false);
          setUser(null);
          console.log("its not ok");
        }
        console.log(auth, user);
      })
      .catch(err => console.log(err))
  }

在上面的函数中，我试图更新用户的状态，但当时我需要点击两次按钮才能在上下文状态中存储用户数据和身份验证。这是什么原因？保证数据来自 axios 请求。

用户上下文.js：

import {createContext} from "react";
export const UserContext = createContext(null);

验证 Context.js：

import {createContext} from 'react';
export const AuthContext = createContext(false);

标签： javascriptreactjsaxios

解决方案

你错过了Provider. react 中的上下文提供了两件事，一个是 the Provider，另一个是Consumer。useContext是消费者的钩子实现。

如下更改您的上下文

UserContext.js

import {createContext, useState} from "react";

export const UserContext = createContext(null);

const UserContextProvider = ({ children}) => {

  const [ user, setUser ] = useState(null);

  return (
    <UserContext.Provider value={{user, setUser}}>
      {children}
    </UserContext.Provider>
  )
}

export default UserContextProvider;

AuthContext.js


import {createContext, useState} from "react";

export const AuthContext = createContext(null);

const AuthContextProvider = ({ children}) => {

  const [ auth, setAuth ] = useState(false);

  return (
    <AuthContext.Provider value={{auth, setAuth}}>
      {children}
    </AuthContext.Provider>
  )
}

export default AuthContextProvider;

一旦你有了这些 Providers 。您应该使用这些 Providers 包装呈现表单的组件。

<UserContextProvider>
  <AuthContextProvider>
    <YourFormComponent /> // your component goes here
  </AuthContextProvider>
</UserContextProvider>

推荐阅读