Javascript数组的和首先返回0

在ReactJS/State中，有一个巨大的噩梦，试图计算一个数组（数字）的和

如果我不使用state，我在下面发布的代码可以工作

基本上，用户通过表单输入一个数字，然后提交

用户键入的内容将通过handleChange进行监视

然后在handlSubmit上，数字/值存储在this.state.generated和this.state.sum中。这些是数组

当我查看控制台时，这两种状态都存储一个数字数组。并收集数组中的每个条目

我想找到并打印这些数字的总数。所以我使用：

// FUNCTION TO CALCULATE TOTAL DONATIONS
const numbers = this.state.sum;
function add(a, b) {
  return a + b;
}
// // TOTAL VALUE OF NUMBERS IN THE ARRAY
const cal = numbers.reduce(add, 0);
console.log('CALC', cal);

然而，我遇到的问题是，如果我提交，例如，数字20。sum函数，控制台首先记录0。当我输入第二个号码时，它会记录我输入的第一个号码

我做错了什么？这是我的完整/相关代码：

class App extends React.Component {

  constructor() {
   super();

   this.state = {
     number: '',
     donated: [],
     sum: [],
     total: 0
   };

  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
 // we need to bind otherwise this is undefined
 }


//HANDLE FUNCTIONS
 handleChange(e) {
   this.setState({ number: e.target.value }, () => 
   console.log('NUMBER', this.state.number));
 }

 handleSubmit(e) {
   e.preventDefault();
  this.setState({donated: this.state.donated.concat(this.state.number).map(Number)}, () => console.log('DONATED', this.state.donated));
 this.setState({sum: this.state.donated.concat(this.state.number).map(Number)}, () => console.log('SUM', this.state.sum));


 // FUNCTION TO CALCULATE TOTAL DONATIONS
 const numbers = this.state.sum;
  function add(a, b) {
  return a + b;
}

// TOTAL VALUE OF NUMBERS IN THE ARRAY
const cal = numbers.reduce(add, 0);
console.log('CALC', cal);


document.forms['id_form'].reset();
}

render() {

return (
  <main>
    <section className="section">
      <h1 className="is-size-2">DONATE FOR A GOOD CAUSE</h1>
      <ProgressBar donated={this.state.donated} sum={this.state.sum}/>
      <Form donated={this.state.donated} handleChange={this.handleChange} handleSubmit={this.handleSubmit} />
    </section>
  </main>
);
}
}

ReactDOM.render(
<App />,
document.getElementById('root')
);

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
编号：''，
捐赠：[]，
总额：[]，
总数：0
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
//我们需要绑定，否则这是未定义的
}
//处理函数
手变（e）{
this.setState（{number:e.target.value}，（）=>
console.log（'NUMBER'，this.state.NUMBER））；
}
handleSubmit（e）{
e、 预防默认值（）；
this.setState（{investate:this.state.investate.concat（this.state.number）.map（number）}，（）=>console.log（'investate'，this.state.investate））；
this.setState（{sum:this.state.concat（this.state.number）.map（number）}，（）=>console.log（'sum'，this.state.sum））；
//用于计算捐赠总额的函数
常量数=this.state.sum；
功能添加（a、b）{
返回a+b；
}
//数组中数字的总值
const cal=数字。减少（添加，0）；
console.log（'CALC'，cal）；
document.forms['id_form'].reset（）；
}
render（）{
返回(
为好的事业捐款
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

根据官方数据

setState（）并不总是立即更新组件。它可以批处理更新或将更新推迟到以后。这使得在调用setState（）之后立即读取This.state成为一个潜在的陷阱。相反，使用componentDidUpdate或setState回调（setState（updater，callback）），这两种回调都保证在应用更新后触发。如果需要基于上一个状态设置状态，请阅读下面的updater参数

使用setState回调计算总和以获得更新的值

this.setState({sum: this.state.donated.concat(this.state.number).map(Number)}, () => {
    console.log('SUM', this.state.sum);
    // FUNCTION TO CALCULATE TOTAL DONATIONS
    const numbers = this.state.sum;
    function add(a, b) {
        return a + b;
    }

    // TOTAL VALUE OF NUMBERS IN THE ARRAY
    const cal = numbers.reduce(add, 0);
    console.log('CALC', cal);


    document.forms['id_form'].reset();
});

或者，您可以在每次提交新值后简单地更新sum变量。像这样

setState({sum: this.state.sum + this.state.number, number: 0});

---

请共享完整的代码您可以使用此模板共享您的工作示例请使用演示问题的示例更新您的问题，最好是使用堆栈片段（

[]

工具栏按钮）运行的问题。堆栈代码段支持React，包括JSX。我真的不能这么做？我使用了多个组件？我认为我无法使用该链接重建整个应用程序。。。。。我必须更改我的代码…我发现了你的问题，setState是异步函数，它在调用它后不会立即更改状态，而你在调用setState后正在使用状态，它仍然包含旧的值。谢谢你，什么是将其构造到我的代码中的最佳方法？太棒了！！！！！！非常感谢你！！！！非常感谢你的帮助！我知道这和订货有关。欣赏知识转移。今天学到了一些新东西。谢谢D