React中的上下文值为null

Question

我想在post组件中使用上下文值，我已经从MYSQL中获得了用户的数据，现在我想使用它们，但是当我控制上下文的每个值时，它都会给我null。但是数据保存在上下文中。

当我在fir Fox中检查我的React工具时，数据已保存在那里，但结果为空

这是我的用户上下文代码：

import React, { useReducer , useState } from 'react';
import axios from 'axios';
import UserContext from './userContext';
import userReducer from './userReducer';

import {
  REGISTER_USER , 
  LOGIN ,
  LOGIN_PROCESS
} from '../type';


const UserState = props => {
  const initialState = {
    firstName : '',
    lastName : '',
    email : '',
    role : '',
    userName : '',
    password : '' , 
    message : '' , 
    singleUser : null,
    isAuthenticated : false
  };

  const [userSingle , setUserSingle] = useState(null);

  const [state, dispatch] = useReducer(userReducer, initialState);

  //Register user
const registerUser = async userData =>{

   console.log(userData);
    const response  = await axios.get(

        `http://localhost/react_cms/api/users/register.php?firstName=${userData.firstName}&
        lastName=${userData.lastName}&
        userName=${userData.userName}&
        password=${userData.password}&
        email=${userData.email}`
        );


    dispatch({
      type : REGISTER_USER , 
      payload : response.data

    });

}

//LogIn user
const userLogIn = async (loginData) => {



    const logInresponse = await axios.get(`http://localhost/react_cms/api/users/login.php?userName=${loginData.userName}
    &password=${loginData.password}`);


    if(logInresponse.data.isAuthenticated) {
      localStorage.setItem('userName' , logInresponse.data.userName);
      localStorage.setItem('password' , logInresponse.data.password);
    } else {
      localStorage.removeItem('userName');
      localStorage.removeItem('password');
    }

    dispatch({type:LOGIN , payload : logInresponse.data});

    console.log(logInresponse.data);

    setUserSingle(logInresponse.data);

}

return (
    <UserContext.Provider 
    value={{
        firstName : state.firstName,
        lastName : state.lastName,
        email : state.email,
        userName : state.userName , 
        password : state.password,
        message : state.message,
        role : state.role,
        isAuthenticated : state.isAuthenticated,
        singleUser : state.singleUser,
        registerUser,
        userSingle ,
        userLogIn
    }}>
    {props.children}
    </UserContext.Provider>
);


}

export default UserState;

我也正在使用useReducer而不是useState，这些是我的userReducer组件：

import { REGISTER_USER , LOGIN } from '../type';
import cookies from 'js-cookie';

export default (state , action) =>{
    switch(action.type) {
        case REGISTER_USER :
            return {
                ...state,
                message : action.payload.message ,
                isAuthenticated : true
            };
         case LOGIN : 
            localStorage.setItem('userName' , action.payload.userName);
            localStorage.setItem('password' , action.payload.password);
            if(localStorage.getItem('userName') != 'undefined')
            {
                cookies.set('userName' , localStorage.getItem('userName') , {expires:5});
                cookies.set('password' , localStorage.getItem('password') , {expires:5});
                cookies.set('user_data' , action.payload , {expires:5});
            }
            return {
                ...state,
                singleUser : action.payload , 
               isAuthenticated : true,

            };
        default : 
            return state;
    }
}

最后这是我的App.js代码：

import React , { Fragment } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/pages/Home';
import Register from './components/pages/RegisterUser';
import LogIn from './components/pages/LogIn';
import Nav from './components/layout/Nav';
import Alert from './components/layout/Alert';
import Post from './components/pages/Posts';

import UserState from './context/user/UserState';
import AlertState from './context/alert/AlertState';


import './App.css';
const App = () => {
    return (

      <UserState>
        <AlertState>
            <Router>
                  <Fragment>
                        <Nav/>
                              <Alert />
                                  <Switch>
                                        <Route exact path='/' component={Home} />
                                        <Route exact path='/register' component={Register} />
                                        <Route exact path='/logIn' component={LogIn} />
                                        <Route exact path='/newpost' component={Post} />
                                  </Switch>
                  </Fragment>
             </Router>
          </AlertState>
     </UserState>

    )
}

export default App

现在写

console.log(userSingle);

在后期组件useEffect函数中，它显示为null，但是我可以看到数据是在fir Fox React工具的userSingle中分配的