更新react redux状态只工作在第二次点击

Question

我是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")
}

Answer 1

我不太确定你的元素是如何布局的，但我假设你的可触摸标签不够大。这里有一个例子，我给它的高度300和宽度700。你可以把它放大到你想要的大小。

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

Answer 2

这是由于异步操作。数据。登录检查后立即进行fetchLoginData()功能运行上的第一次点击是不正确的第一种情况。因此，第一次单击不需要重定向。当您再次单击时，它会重定向，因为state已经为true。

您可以这样修复它:如果响应在fetchLoginData()函数中是完整的，则重定向将是正确的。

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

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