延迟一个字符更新状态答案

【问题标题】：Delay on updating the state by one character延迟一个字符更新状态
【发布时间】：2021-03-06 22:32:00
【问题描述】：

我有 4 个输入字段，我在其中输入金额并根据该金额获得费率。

场景：当用户填写字段时，例如在 input1 中输入 20000，速率必须为 116.04，而不是该用户得到 11.60。所以有 1 个字符的明显延迟，只要我在 input2 字段中输入 0，我就会得到正确的速率，即 116.04 这对我来说是不可接受的，因为我总共有 4 个字段，而且数字总是不同的。我该如何解决？这是我的状态：

 this.state = {
            input: {
                amount: '20000',
                inputField1: '',
                inputField2: '',
                inputField3: '',
                inputField4: '',
                ...window.input,
            },

这些是我的输入字段：

 <Input className="col-8"
                value={this.state.input.inputField1}
                onChange={(event) => {
                this.updateInputField("inputField1", event.target.value);
                }}/>
<Input className="col-8"
                value={this.state.input.inputField2}
                onChange={(event) => {
                this.updateInputField("inputField2", event.target.value);
                }}/>
<Input className="col-8"
                value={this.state.input.inputField3}
                onChange={(event) => {
                this.updateInputField("inputField3", event.target.value);
                }}/>
<Input className="col-8"
                value={this.state.input.inputField4}
                onChange={(event) => {
                this.updateInputField("inputField4", event.target.value);
                }}/>

这些是我的方法：

updateInput = (key, value) => {
    let input = {...this.state.input};
    input[key] = value;
    window.input = input;
    this.calculate(input);
};

updateInputField= (key, value) => {
    let {input} = this.state;
    let sum = +input.inputField1 + +input.inputField2 + +input.inputField3 + +input.inputField4
    input[key] = value;
    this.setState({input});
    window.input = input;
    this.updateInput("amount",sum)// this is where I am getting the delay
};

我正在尝试使用此状态的总金额：

<p>{this.state.input.amount}</p>

【问题讨论】：

标签： reactjs input onchange

【解决方案1】：

在您的 updateInputField 函数中 - 不要计算 sum 之前更新 input[key]，尝试更新 input[key]，然后计算 sum。像这样：

// first, update 'input' with the new value
input[key] = value;

// next, calculate the new sum
let sum = +input.inputField1 + +input.inputField2 + +input.inputField3 + +input.inputField4

您看到的“延迟”是由于您的代码遵循以下顺序：

从状态中获取旧的input 值
计算旧 input 值的总和
用value 更新input（当前key 已更新）
- 这需要是#2，而不是#3！
将更新后的input 设置为状态
致电this.updateInput

所以您的新 updateInputField 函数将如下所示：

updateInputField= (key, value) => {
    let {input} = this.state;
    // first, update 'input' with the new value
    input[key] = value;

    // next, calculate the new sum
    let sum = +input.inputField1 + +input.inputField2 + +input.inputField3 + +input.inputField4

    this.setState({input});
    window.input = input;
    this.updateInput("amount",sum)
};

【讨论】：