React中如何在useEffect钩子内设置并访问状态变量？

问题原因 #

React的useState状态更新是异步操作，调用setlocalusername和setlocalpassword后，状态变量不会立刻同步更新。你当前的useEffect里，console.log执行时，localusername和localpassword还是初始的undefined，所以控制台输出undefined；而前端展示正常是因为状态更新完成后，组件会自动重新渲染，此时就能拿到最新的状态值了。

解决方案 #

方案1：直接打印从localStorage取出的原始值

既然你是从localStorage获取值来设置状态，直接打印这个刚取出的值就行，没必要等状态更新：

const [localusername, setlocalusername] = useState();
const [localpassword, setlocalpassword] = useState();

useEffect(() => {
  const username = localStorage.getItem("username");
  const password = localStorage.getItem("password");
  
  setlocalusername(username);
  setlocalpassword(password);
  
  // 直接打印取出的原始值
  console.log(username);
  console.log(password);
}, []);

方案2：新增监听状态变化的useEffect

如果确实需要在状态更新完成后打印最新值，可以新增一个依赖于状态变量的useEffect，当状态发生变化时自动触发打印：

const [localusername, setlocalusername] = useState();
const [localpassword, setlocalpassword] = useState();

// 初始化时从localStorage加载状态
useEffect(() => {
  setlocalusername(localStorage.getItem("username"));
  setlocalpassword(localStorage.getItem("password"));
}, []);

// 监听状态变化，更新后打印最新值
useEffect(() => {
  console.log(localusername);
  console.log(localpassword);
}, [localusername, localpassword]);

方案3：用useRef保存最新值（可选）

如果一定要在同一个useEffect里跟踪最新的状态内容，可以使用useRef——ref的更新是同步的，能实时拿到最新值：

import { useState, useEffect, useRef } from 'react';

const [localusername, setlocalusername] = useState();
const [localpassword, setlocalpassword] = useState();
const usernameRef = useRef();
const passwordRef = useRef();

useEffect(() => {
  const username = localStorage.getItem("username");
  const password = localStorage.getItem("password");
  
  setlocalusername(username);
  setlocalpassword(password);
  
  // 把值存入ref
  usernameRef.current = username;
  passwordRef.current = password;
  
  // 打印ref里的最新值
  console.log(usernameRef.current);
  console.log(passwordRef.current);
}, []);

内容的提问来源于stack exchange，提问作者M Husnain Abbas