输入值没有完全看到,为什么?

时间:2018-10-28 16:39:32

标签: javascript reactjs react-native react-redux

因此,几乎所有内容都可以正常工作,问题是当我在输入中键入内容时,它不能完全更新redux状态。示例:如果我输入ABC,它将像ab一样通过axios.post()发送到服务器...如果我键入BEER,它将发送BEE ...它不会看到最后一个字母,或者如果我选择了自动完成文本设备,如果它是输入中的最后一项,它不会看到整个单词。...

有什么建议吗?

谢谢。

  class AddressScreen extends Component {
      state = {
        usersNickOrName: "",
        usersAddress: "",
        usersPhoneNumber: ""
      };

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

      onPressHandler = () => {


        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);

1 个答案:

答案 0 :(得分:2)

您当前正在使用componentWillUpdate中的旧状态。改为使用下一个状态。

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