Question

有一场大规模的噩梦，试图在ReactJS / State中计算一个数组（数字）的总和。

如果我没有使用州，我在下面发布的代码有效。

基本上，通过表单，用户输入一个数字，然后提交。
用户输入的内容，通过handleChange观看。
然后在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')
);

Answer 1

根据官方documentation

setState（）并不总是立即更新组件。它可以批量推迟更新或推迟更新。这使得在调用setState（）之后立即读取this.state是一个潜在的陷阱。相反，使用componentDidUpdate或setState回调（setState（更新程序，回调）），其中任何一个都保证在应用更新后触发。如果需要根据以前的状态设置状态，请阅读下面的updater参数。

使用setState callBack计算sum以获取更新值

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

Javascript数组的总和首先返回0

1 个答案: