更新 react redux 状态仅在第二次单击时起作用答案

【问题标题】：Update react redux state only work on second click更新 react redux 状态仅在第二次单击时起作用
【发布时间】：2021-10-23 03:56:21
【问题描述】：

我是 react-redux 的新手我想从 Redux 获取提交数据，如果我成功了，那么我想导航到另一个屏幕，否则会显示警报。

但是，我只有在第二次点击后才能成功

代码：

const {fetchLoginData} = props;
const data = props;

async function onSubmit() {

  fetchLoginData(phoneNo);

   //if i get true from fetchLoginData(phoneNo) then navigate to other screen otherwise an alert will show
   if(data.login)
      props.navigation.navigate('ScreenName')
   else
      alert("User Not Registered")
}

【问题讨论】：

你在哪里调用这个函数？我可以看到元素的样式吗？您是在模拟器上运行还是在实际设备上运行？
我在实际设备上运行，
onSubmit()} isLoading={login.loading} />

标签： javascript react-native redux react-redux

【解决方案1】：

我不太确定您的元素是如何布局的，但我假设您的可触摸标签不够大。这是我给它的高度为 300 和宽度为 700 的示例。您可以根据需要将其设置为任意大。

const GradientBtn = () => {
  return (
    <TouchableOpacity
      onPress={() => onSubmit()}
      style={{height: 300, width: 700}}>
      {/* INSERT BUTTON CODE HERE */}
    </TouchableOpacity>
  );
};

【讨论】：

【解决方案2】：

这是由于异步操作造成的。在第一次单击时运行 fetchLoginData() 函数后立即进行的 data.login 检查对于第一种情况是不正确的。因此，第一次点击没有重定向。当您再次单击时，它会重定向，因为 state 已经为 true。

您可以这样解决：如果fetchLoginData()函数中的响应已满，则重定向是正确的。

或者你可以使用它。您可以在表单设计所在的组件中的任何位置调用重定向函数。例如;

<View>
<Form>
....
</Form>
{data.login && props.navigation.navigate('ScreenName')}
</View>

【讨论】：