有一个巨大的噩梦,试图在ReactJS/State中计算数组(数字)的总和。
如果我不使用state,我在下面发布的代码可以工作。
当我查看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')
);
发布于 2018-05-28 20:01:58
根据官方documentation
setState()并不总是立即更新组件。它可能会批量或将更新推迟到以后。这使得在调用setState()之后立即读取this.state成为一个潜在的陷阱。相反,可以使用componentDidUpdate或setState回调(setState(updater,callback)),这两个回调都保证在应用更新后触发。如果您需要根据之前的状态设置状态,请阅读下面的更新程序参数。
使用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});
https://stackoverflow.com/questions/50565591
复制相似问题