如何在使用 onClick 函数时更新状态

Question

我正在尝试使用reactjs通过调用axios创建用户配置文件。但我只能在使用Effect时看到更新的状态，而在其他地方看不到。在loginPage中。js，我正在尝试获取entryfirstName、entryLastName和role的最新状态，并将其发布到登录函数中，该函数将返回到我的userProvider.js中。我不知道如何更新状态，所以任何反馈都比我得到的要好。

我是新手反应，我无法解决这个问题，所以任何帮助将不胜感激！

这是我的登录页面代码.js

export default function SignIn()  {
  const { login } = useContext(UserContext);

  const [email_input, setEmail] = useState('');
  const [password_input, setPassword] = useState('');
  const [entryfirstName, setFirstName] = useState('');
  const [entrylastName, setlastName] = useState('');
  const [role, setRole] = useState('');
  const [entryuser, setEntryUser] = useState({});

  const baseURL = 'http://samplesite.org/';

  const handleEmailInputChange = event => {
    setEmail(event.target.value);
  };
  const handlePasswordInputChange = event => {
    setPassword(event.target.value);
  };

  const gatherData = async () => {
    try {
      const userlogins = await axios.get(`${baseURL}/user`);
      setEntryUser(userlogins.data.users);
    } 
    catch (error) {
      console.log(error);
    }
  };
  
  const updateData = (loggedin_id, userFirst, userLast) => {
    setRole(loggedin_id);
    setFirstName(userFirst);
    setlastName(userLast);
  }, [role, entryfirstName, entrylastName]);

  const submit = () => {
    if (email_input === null || password_input === null || email_input === "" || password_input === "") {
      alert("Enter username and password");
    } 
    else {
      if (entryuser.map(x => x.email === email_input && x.password === password_input)) {
          console.log("Email and Password exists");
          const loggedin = entryuser.filter(obj => obj.email === email_input); 
          const loggedin_role = loggedin.map(({ role }) => `${role}`);
          const loggedin_id = loggedin_role.toString();
          const userNames_1 = loggedin.map(({ firstName }) => `${firstName}`);
          const userNames_2 = loggedin.map(({ lastName }) => `${lastName}`);
          const userFirst = userNames_1.toString();
          const userLast = userNames_2.toString();
          updateData(loggedin_id, userFirst, userLast);
        }
      else {
        alert("User Does not Exist.");
      }
    }
  }

  useEffect(() => {
    gatherData(); 
    console.log('useEffect role: ', role);
    console.log('useEffect firstname: ', entryfirstName);
    console.log('useEffect lastname: ', entrylastName);
  }, [role, entryfirstName, entrylastName]);

  const handleClick = (event) => {
    event.preventDefault();
    submit();
    console.log('role: ', role);
    console.log('firstname: ', entryfirstName);
    console.log('lastname: ', entrylastName);
    login(entryfirstName, entrylastName, email_input, password_input, role);
  }

这是userProvider.js代码

import React from "react";
import UserContext from "./UserContext";

const UserProvider = ({ children }) => {
    const [user, setUser] = React.useState({ 
      firstName: '', 
      lastName: '', 
      email: '', 
      role: '', 
      auth: false 
    });
  
    const login = (firstName, lastName, email, password, role) => {
      setUser((user) => ({
          firstName: firstName,
          lastName: lastName,
          email: email,
          password: password,
          role: role,
          auth: true,
        }));
      };
  
    const logout = () => {
      setUser((user) => ({
        firstName: '',
        lastName: '',
        email: '',
        password: '',
        role: '',
        auth: false,
      }));
    };
  
    return (
      <UserContext.Provider 
        value={{ 
          user, 
          login, 
          logout }}
      >
        {children}
      </UserContext.Provider>
    );
  };

export default UserProvider;

Answer 1

我会调用axios：
注意：为什么调用所有用户？我认为这是不对的，也许axios.get（${base URL}/user/${email}）；对于大多数特定用户，最佳实践安全性或例如：

const login = async (firstName, lastName, email, password, role) => {
      if(firstName && lastName && email && password && role){

      const { data } = await axios.post(session_url, {}, {
         auth: {
           email: email,
           password: password
        }
      });

      if(data){
        setUser((user) => ({
            firstName: data.user.firstName,
            lastName: data.user.lastName,
            email: data.user.email,
            role: data.user.role,
            auth: true,
        }));
      }
}
 

请阅读： 身份验证 - 公理

但我们还是继续吧

import {useState, useEffect} from "react";
import UserContext from "./UserContext";

const baseURL = 'http://samplesite.org/';

const UserProvider = ({ children }) => {
    const [entryuser, setEntryUser] = useState({});
    const [user, setUser] = useState({ 
      firstName: '', 
      lastName: '', 
      email: '', 
      role: '', 
      auth: false 
    });

   // you need a useEffect to verify if user is logged
   useEffect(() => {
      const getCurrentUser = localStorage.getItem("currentUser");
      if (getCurrentUser) {
        const currentUser = JSON.parse(getCurrentUser);
        // now you need validate expireAt
        // also make an axios call here, to check if you are authenticated on the backend
        // validate all necessary
        setUser((user) => ({
                firstName: currentUser.firstName, 
                lastName: currentUser.lastName, 
                email: currentUser.email, 
                role: currentUser.role, 
                auth: true,
        }));
      }
    },[])
  
    const login = async (firstName, lastName, email, password, role) => {
       try {
         const userlogins = await axios.get(`${baseURL}/user`);

         if(userLogins.data) {
            setEntryUser(userlogins.data.users);
            const loggedin = entryuser.filter(obj => obj.email === email); 
            const loggedin_role = loggedin.map(({ role }) => `${role}`);
            const loggedin_id = loggedin_role.toString();
            const userNames_1 = loggedin.map(({ firstName }) => `${firstName}`);
            const userNames_2 = loggedin.map(({ lastName }) => `${lastName}`);
            const userFirst = userNames_1.toString();
            const userLast = userNames_2.toString();

          // you need save this data in cookies or localstorage, 
          // I use crypto-js in localStorage

            const currentUser = {
               firstName: userFirst,
               lastName: userLast,
               role: loggedin_id,
               expireAt:  // here you need a time to expire sesion
             }

            localStorage.setItem("currentUser",  JSON.stringify(currentUser));

            setUser((user) => ({
               firstName: userFirst,
               lastName: userLast,
               email: email,,
               role: loggedin_id,
               auth: true,
             }));
         };
       } 
       catch (error) {
         console.log(error);
       }
     };
  
    const logout = () => {
      setUser((user) => ({
        firstName: '',
        lastName: '',
        email: '',
        password: '',
        role: '',
        auth: false,
      }));
    };


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

export default UserProvider;

注意：为什么您的登录会询问您的姓名和角色？最好从后端处理这些数据，您只能使用电子邮件和密码

interface IFormLogin {
  email: string;
  password: string;
  firstName: string;
  lastName: string;
  role: string;
}

export default function SignIn()  {
  const { login } = useContext(UserContext);
  const [formLogin, setFormLogin] = useState<IFormLogin>({
     email: "";
     password: "";
     firstName: "";
     lastName: "";
     role: "";
  })

  const handleInputChange = event => {
    setFormLogin((formState: IFormLogin) => ({
      ...formState,
        [event.target.name]: event.target.value,
      },
    }));
  };

 const handleSubmit = (event) => {
    event.preventDefault();
    const {email, password, firstName, lastName, role} = formLogin;

    if (!email && !password && !firstName && !lastName && !role) {
      alert("Enter all data");
      return;
    }

    login(firstName, lastName, email, password, role);
  }

 return(
  <form onSubmit={handleSubmit}>
   <input name="email" type="email" value={formLogin.email || ""} onChange={handleInputChange} />
   <input name="password" value={formLogin.password || ""} onChange={handleInputChange} />
   <input name="firstName" value={formLogin.firstName || ""} onChange={handleInputChange} />
   <input name="lastName" value={formLogin.lastName || ""} onChange={handleInputChange} />
   <input name="role" value={formLogin.role || ""} onChange={handleInputChange} />
   <button type="submit">Login</button>
  </form>
 );

const { user } = useContext(UserContext);
console.log(user.firstName);

请不要在客户端的任何地方保存密码，我的意思是本地存储、会话存储、cookie、上下文、redux等。

您可以使用Json Web令牌来加密来自后端的数据，并将该令牌保存在本地存储中。

反应中的 JWT 身份验证

注意:我在任何情况下都使用TypeScript，如果您愿意，请省略该部分。