POST请求是在第二次或第三次点击输入按钮时发送的,为什么



因此,我的代码中的所有内容都能正常工作,只有在第二次甚至第三次点击按钮时发送发布请求。。。我猜这与我更新redux状态的方式有关,但我的大脑冻结了,有人能告诉我我的错误在哪里吗?

干杯!

class AddressScreen extends Component {
state = {
usersNickOrName: "",
usersAddress: "",
usersPhoneNumber: ""
};
onPressHandler = () => {
this.props.deliveryInfo(
this.state.usersNickOrName,
this.state.usersAddress,
this.state.usersPhoneNumber
);
let uid = this.props.uid;
axios.post(
`.../users/${uid}/info.json`,
{
nameOrNick: this.props.name,
address: this.props.address,
phoneNum: this.props.phoneNum
}
);
this.props.navigator.pop();
};
render() {
return (
<View style={styles.container}>
<AnimatedForm delay={100} distance={10}>
<AnimatedInput
onChangeText={text => {
this.setState({ usersNickOrName: text });
}}
/>
<AnimatedInput
onChangeText={text => {
this.setState({ usersAddress: text });
}}
/>
<AnimatedInput
onChangeText={text => {
this.setState({ usersPhoneNumber: text });
}}
/>
<Animated.View style={styles.buttonView}>
<TouchableOpacity
style={styles.button}
onPress={this.onPressHandler}
>
<Text style={{ color: "#fff" }}>Dodaj Info</Text>
</TouchableOpacity>
</Animated.View>
</AnimatedForm>
</View>
);
}
}

const mapStateToProps = state => {
return {
name: state.usersNickOrName,
address: state.usersAddress,
phoneNum: state.usersPhoneNumber,
uid: state.userUid
};
};
const mapDispatchToProps = dispatch => {
return {
deliveryInfo: (usersName, usersAddress, phoneNum) =>
dispatch(deliveryInfo(usersName, usersAddress, phoneNum))
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(AddressScreen);

编辑:

我所做的是,我将redux更新状态放在componentWillUpdate中,并将其从onPressHandler中删除。现在它几乎像预期的那样工作,例如,如果我进入伦敦街36号,它将POST请求伦敦街3号,它不会向服务器发送最后一个字母或数字。。。为什么?

componentWillUpdate() {
this.props.deliveryInfo(
this.state.usersNickOrName,
this.state.usersAddress,
this.state.usersPhoneNumber
);
}

根据我在您的实现中看到的,the post request将始终由按钮(TouchableOpacity(调用。要防止这种情况发生,您可以执行一个功能,在尝试激发a new post request之前,该功能将检查是否存在正在进行的post request

最新更新