React使用Redux Hook存储数据时console.log无输出问题咨询

问题原因 #

1. Redux异步请求时序问题：你在组件挂载时dispatch(getUser())拉取远程JSON数据是异步操作，在请求完成前，Redux中state.User.user的初始值为空对象/undefined，此时直接访问user.username会抛出读取属性失败的错误。
2. useState异步更新问题：Formik提交回调中你刚调用getUsername(value.email)更新状态就立即读取username，而useState的更新是异步批量执行的，此时拿到的username还是更新前的旧值，无法获取到当前输入的内容。
3. 部分场景下可能存在Redux reducer初始值配置错误、getUser异步thunk请求成功后未正确触发数据更新的问题。

解决步骤 #

1. 调整取值逻辑规避空值报错
   给Redux返回的user值添加可选链操作符或者空值判断，防止初始为空时报错：

const user = useSelector((state) => state.User.user);
// 可以先加日志确认数据是否正确返回
console.log('Redux user 数据：', user)

2. 优化登录验证逻辑，避免依赖未更新的state
   Formik提交时直接使用回调返回的表单值，不需要先存入useState再读取，省掉多余的状态更新步骤：

// 改写getAuth方法，直接接收输入的账号密码
function getAuth(inputEmail, inputPassword){
  console.log('输入的账号：', inputEmail)
  // 可选链避免空值报错
  console.log('远程JSON的账号：', user?.username)
  // 数据对比逻辑
  if (user?.username === inputEmail && user?.password === inputPassword) {
    // 验证通过后的逻辑
  } else {
    // 验证失败逻辑
  }
}

// Formik的onSubmit回调直接传值
onSubmit={value => {
  getAuth(value.email, value.password)
  SetTimer()
}}

3. （可选）优化交互避免未加载完成就提交
   如果担心请求未完成用户就点击登录，可以在User的reducer中新增loading状态，请求发起时设为true，请求完成设为false，登录按钮的disabled属性添加loading判断，等数据拉取完成后再允许提交。
4. 排查Redux侧逻辑
   确认你的getUser异步thunk请求成功后，正确dispatch了修改state.User.user的action，同时User reducer的初始值至少设置为空对象{}，不要设为null/undefined。

内容的提问来源于stack exchange，提问作者Lê Quốc Khánh