Javascript 不显示React中两个输入字段值的结果

我必须在react中对两个输入字段的值求和。我在显示结果时遇到了一些问题。 如何将整个计算结果保存到下拉菜单

我认为我的代码中也存在异步问题： 第一次按下按钮仅显示下拉菜单中的输入字段值，第二次按下按钮仅显示结果

这是我的密码

   import React from 'react'

   export default class SumCalculation extends React.Component {
        constructor(props) {
        super(props);
        this.state = {
           number1: 0,
           number2: 0,
           total: 0,
           results:[],
        }
     }
  handleChange = (e) =>{
        const {name, value} = e.target;
       this.setState({
          [name]: value
       })
   }

add = () => {
    const { number1, number2 } = this.state;
    this.setState({
        total: (parseInt(number1) + parseInt(number2))
    })
    let result = { number1: this.state.number1, number2: this.state.number2, total: this.state.total};
    const t = [...this.state.results, result];
    this.setState({ results: t });
    this.setState({ number1: "" });
    this.setState({ number2: "" });
}

render() {

    let dropdown = this.state.results.map((item, id) => {
        return <option key={id}>{item.number1} + {item.number2} = {item.total}</option>
    });

    return (
        <div>

            <div>
                <label>Number 1</label>
                <input type="text" name="number1" onChange={this.handleChange} />
            </div>
            <div>
                <label>Number 2</label>
                <input type="text" name="number2" onChange={this.handleChange} />
            </div>
            <button onClick={this.add}>Laske yhteen</button>
            <div><select>{dropdown}</select></div>
        </div>
       );
    }
}

从“React”导入React
导出默认类SumCalculation.Component{
建造师（道具）{
超级（道具）；
此.state={
数字1:0，
数字二:0,，
总数：0，
结果：[]，
}
}
handleChange=（e）=>{
常量{name，value}=e.target；
这是我的国家({
[名称]：值
})
}
添加=（）=>{
常量{number1，number2}=this.state；
这是我的国家({
总计：（parseInt（number1）+parseInt（number2））
})
让结果={number1:this.state.number1，number2:this.state.number2，total:this.state.total}；
const t=[…this.state.results，result]；
this.setState（{results:t}）；
this.setState（{number1:“}）；
this.setState（{number2:：}）；
}
render（）{
let dropdown=this.state.results.map（（项目，id）=>{
返回{item.number1}+{item.number2}={item.total}
});
返回(
第一
二号
拉斯克伊顿酒店
{下拉列表}
);
}
}

虽然

setState（）

是异步的，但应该传递回调函数以使用更新的状态值。例如，在add函数中：

add = () => {

    const { number1, number2 } = this.state;

    this.setState({

        total: (parseInt(number1) + parseInt(number2))

    }, () => {

        let result = { number1: this.state.number1, number2: this.state.number2, total: this.state.total};

        const t = [...this.state.results, result];

        this.setState({ results: t }, () => {

            this.setState({ number1: "" }, () => {

                this.setState({ number2: "" });

            });

        });

    })

}

---

PS:我添加了一些换行符以增加可读性。

感谢您的快速响应。现在效果很好：）很高兴听到它有帮助：）