在第二次或第三次单击输入按钮时发送 POST 请求，为什么？

Question

因此，我的代码中的所有内容都按预期工作，只有在第二次甚至第三次单击按钮时才发送发布请求...我猜它与我更新的方式有关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 中删除。现在它几乎可以正常工作，例如，如果我进入 London Str. 36 它将 POST 请求 London Str. 3、它不会将最后一个字母或数字发送到服务器...这是怎么回事？

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

Answer 1

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