用户未显示在本地存储中答案

【问题标题】：User not showing in local storage用户未显示在本地存储中
【发布时间】：2022-07-22 16:35:27
【问题描述】：

我正在处理我的第一个 MERN 项目并尝试使用 本地存储和上下文 API，但数据没有反映在本地存储中，也没有错误反映在控制台中.

当我以用户身份登录时，本地存储仍然是空的。

下面是我的 Context.js 代码

 import { createContext, useEffect, useReducer, useState } from "react";
 import Reducer from "./Reducer";



const INITIAL_STATE = {
user: JSON.parse(localStorage.getItem("user")) || null,
isFetching: false,
error: false,
};

 export const Context = createContext(INITIAL_STATE);

 export const ContextProvider = ({ children }) => {
 const [state, dispatch] = useReducer(Reducer, INITIAL_STATE);

 const [user, setItems] = useState([]);

 useEffect(() => {
 localStorage.setItem('user', JSON.stringify(state.user));
}, [state.user]);

 return (
<Context.Provider
  value={{
    user: state.user,
    isFetching: state.isFetching,
    error: state.error,
    dispatch,
  }}
>
  {children}
</Context.Provider>
 );
};

下面是我的 login.jsx 代码

 import { Link } from "react-router-dom";
 import "./login.css"
 import { useContext, useRef } from "react";
 import axios from "axios";
 import { Context } from "../../../context/Context";

  export default function Login() {

  const userRef = useRef();
  const passwordRef = useRef();
  const { user, dispatch, isFetching } = useContext(Context);


 const handleSubmit = async (e) => {
  e.preventDefault();
  dispatch({ type: "LOGIN_START" });
   try {
    const res = await axios.post("/auth/login", {
    username: userRef.current.value,
    password: passwordRef.current.value,
     });
     dispatch({ type: "LOGIN_SUCCESS", payload: res.data });
    } catch (err) {
  dispatch({ type: "LOGIN_FAILURE" });
    }
 };

 console.log(isFetching)

  return (
   <div className="login">
    <span className="loginTitle">Login</span>
    <form className="loginForm" onSubmit={handleSubmit}>
    <label>Username</label>
    <input className="loginInput" type="text" placeholder="Enter your username..." ref= 
   {userRef} />
      <label>Password</label>
       <input className="loginInput" type="password" placeholder="Enter your 
    password..." 
      ref={passwordRef} />
       <button className="loginButton" type="submit">Login</button>
      </form>
       <button className="loginRegisterButton">
       <Link className="link" to="/register">Register</Link>
      </button>
    </div>
   );
 }

我已经尝试在谷歌上搜索了 2 个小时，但我无法找到它所产生的错误。非常感谢任何帮助！

【问题讨论】：

标签： node.js reactjs authentication local-storage react-context

【解决方案1】：

import { createContext, useEffect, useReducer, useState } from "react";
 import Reducer from "./Reducer";



const INITIAL_STATE = {
user: JSON.parse(localStorage.getItem("user")) || null,
isFetching: false,
error: false,
};

 export const Context = createContext(INITIAL_STATE);

 export const ContextProvider = ({ children }) => {
 const [state, dispatch] = useReducer(Reducer, INITIAL_STATE);

 const [user, setItems] = useState([]);

 useEffect(() => {
 console.log(state.user);
 localStorage.setItem('user', JSON.stringify(state.user));
}, [state.user]);

 return (
<Context.Provider
  value={{
    user: state.user,
    isFetching: state.isFetching,
    error: state.error,
    dispatch,
  }}
>
  {children}
</Context.Provider>
 );
};

我认为你最好先检查一下用户数据是否在里面。

【讨论】：