从子级到父级setState落后了一步

Question

我正在使用基本的计算器类型的应用程序，但是遇到了问题。我正在将状态从孩子传递到父母，这似乎总是落后一步。

我尝试在onChange函数中设置条件，以在长度为3时设置状态，但是即使长度在后面也是如此。我已经做了大量研究，并且了解到setState是异步的，但是我仍然不确定自己做错了什么。

App Engine Maven plugin

Parent.js

DL = getDLScore => {
  this.setState({ dlScore: getDLScore }, () =>
    console.log('state', this.state.dlScore)
  );
};

<Text>
  Points - {this.state.dlScore} + {this.state.ptScore}
</Text>

<View>
  <Deadlift mosLevel={this.state.mosLevel} handler={this.DL} />
</View>

Child.js

getDLScore(e) {
    let i;
    let deadliftScore = this.state.deadliftScore;

    i = deadliftScore.scoreSheet[e];

    if (e != '') {
      if (this.props.mosLevel === '1') {
        if (e < 180) {
          return <Text style={styles.failed}>fail</Text>;
        } else if (e >= 340) {
          return 100;
        } else {
          return i;
        }


handleInputChange = () => {
  this.props.handler(this.getDLScore(this.state.dlScoreInput));
};

<View>
  <TextInput
    onChangeText={dlScoreInput => this.setState({ dlScoreInput })}
    style={styles.input}
    keyboardType="number-pad"
    autoCorrect={false}
    maxLength={3}
    value={this.state.dlScoreInput}
    onChange={this.handleInputChange}
  />
</View>

Answer 1

您应该在子组件中仅通过调用

将状态传递给父组件

this.props.handler(this.state.dlScoreInput) 因此您的onchange方法应如下所示

handleInputChange = () => {
 this.props.handler(this.state.dlScoreInput);
};