Reactjs 我如何在这里用正确的方法处理道具的状态？它没有'；t更新

为什么控制台中的“初始结果”和“最终结果”相同，尽管html中的state.Result不同且正确？我做错了吗？ 我想有一个文本输入，当您键入时更新结果。此外，当您删除带有退格的信件时，它不会更新

我在控制台中打印了这些值，但这是因为这些值是过去的值，而不是当前的值

import React from 'react';

export default class TQValueCalculator extends React.Component {

constructor(props) {
    super(props);
    this.state = ({result:0});
    this.input = React.createRef();
    this.handleChange = this.handleChange.bind(this);
}

calculateTQValue(letter) {
      switch(letter) {
        case 'a':
            return 1;
        case 'b':
            return 2;
        case 'c':
            return 3;
        default:
            return null;
      }
  }

handleChange(event) {

    this.setState({result: 0})

    console.log("Initial Result " + this.state.result);

    for (var i = 0; i < this.input.current.value.length; i++) {
        this.setState({result: this.state.result + 
        this.calculateTQValue(this.input.current.value.charAt(i))})
    }

    console.log("Final Result " + this.state.result);
}

render(){

    return(
      <div>

      <input
        type="text"
        name="word"
        placeholder='Write here...'
        defaultValue = ''
        ref={this.input}
        onInput={this.handleChange}
        >
      </input>

      <p>
        Result: {this.state.result}
      </p>

      </div>
    )
  }

}  

从“React”导入React；
导出默认类TQValueCalculator扩展React.Component{
建造师（道具）{
超级（道具）；
this.state=（{result:0}）；
this.input=React.createRef（）；
this.handleChange=this.handleChange.bind（this）；
}
CalculateQValue（字母）{
开关（字母）{
案例“a”：
返回1；
案例“b”：
返回2；
案例“c”：
返回3；
违约：
返回null；
}
}
手变（活动）{
this.setState（{result:0}）
log（“初始结果”+this.state.Result）；
对于（var i=0；i
)
}
}  

因为setState是异步的。 最终结果控制台日志发生在实际设置状态之前

（同样，当实际更改发生时，组件会重新呈现，这就是为什么您在html中看到正确的值，但控制台日志已经出现的原因。）

来自文档

setState（）不会立即改变this.state，但会创建挂起的状态转换。调用此方法后访问this.state可能会返回现有值。无法保证对setState调用的同步操作，并且可能会对调用进行批处理以提高性能

您可以在更改发生后传递回调以检查值

this.setState({ key: value }, function () {
    console.log(this.state.key)
})

使用setState（）时，调用异步函数，异步函数不会立即响应。这需要时间。如果需要在setstate（）之后检查状态，则应使用

this.setState({result: this.state.result,()=>console.log(this.state.result))

---

此外，当状态更新时，组件及其子组件将重新渲染。因此，您可以在渲染函数中读取更新的状态。

我认为您应该计算该值，然后只更新一次状态。另外，当您想要使用状态的上一个值时，您应该使用

this.setState（prevState=>（{result:prevState.result+…