Javascript数组的Sum首先返回0
Javascript数组的Sum首先返回0
提问于 2018-05-28 19:41:15
有一个巨大的噩梦，试图在ReactJS/State中计算数组(数字)的总和。
如果我不使用state，我在下面发布的代码可以工作。
- 基本上，用户通过表单输入一个数字，然后提交。
- 用户输入的内容，通过
- 查看，然后在handlSubmit上，数字/值存储在this.state.donated和this.state.sum中。这些是数组。
当我查看console时，两种状态都存储了一个数字数组。并很好地收集数组中的每个条目。
我想找出并打印这些数字的总和。所以我使用：
// 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函数，console首先记录。当我输入第二个数字时，它会记录我输入的第一个数字...
我做错了什么？下面是我的完整/相关代码：
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')
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50565591
复制相关文章
相似问题