JavaScript数组的总和返回0

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (42)

我试图计算在ReactJS /状态数组的总和(数字)。

如果我不使用状态,我在下面发布的代码有效。

  1. 基本上,用户通过表单输入一个数字然后提交。
  2. 用户输入的内容是通过handleChange监视的。
  3. 然后在handlSubmit上,数字/值存储在this.state.donated和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,控制台首先记录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')
);
提问于
用户回答回答于

使用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});

扫码关注云+社区

领取腾讯云代金券