React Redux状态仅第二次点击提交时生效，应如何排查解决？

• fetchLoginData是异步请求方法，调用后没有加await等待请求执行完成，就直接判断登录状态，此时Redux还没完成状态更新，第一次判断取到的是请求前的旧状态
• 你在函数外部提前把props赋值给了局部变量data，这个局部变量不会响应props的更新，第一次点击时判断的永远是点击前的状态，直到第二次点击时才能拿到第一次请求后更新的状态值

方案一：等待异步请求完成后直接判断（推荐） #

首先确保你的fetchLoginData异步Action（如基于redux-thunk实现）返回了请求对应的Promise，之后修改代码如下：

const {fetchLoginData} = props;

async function onSubmit() {
  // 等待异步登录请求执行完成
  await fetchLoginData(phoneNo);
  // 直接从最新的props取状态，不要提前缓存props到局部变量
  if(props.login) {
    props.navigation.navigate('ScreenName')
  } else {
    alert("User Not Registered")
  }
}

方案二：监听状态变化触发跳转 #

如果不方便修改Action返回Promise，可以通过监听登录状态的变化自动执行跳转逻辑：

import { useEffect } from 'react';

const {fetchLoginData, login} = props;

// 监听login状态变化，状态变为true时自动跳转
useEffect(() => {
  if(login) {
    props.navigation.navigate('ScreenName')
  }
}, [login, props.navigation])

async function onSubmit() {
  fetchLoginData(phoneNo);
}

内容的提问来源于stack exchange，提问作者Juhi Kukreja