计数处于状态的数组的值时超出最大更新深度
计数处于状态的数组的值时超出最大更新深度
提问于 2019-05-14 02:42:52
我正在尝试计算来自state.map的值
checkIFvat(value){
if(value > 0) {
this.setState({totalVat: this.state.totalVat + value});
return ("*")
}
}
{this.state.invoiceDetails.map(obj => {
return (
<tr>
<td>
{obj.quantity * obj.salePrice} {this.checkIFvat(obj.vatValue)}
</td>
</tr>
);
})}
<p>Vat 11%{this.state.totalVat}</p>我应该怎么做才能让它正常工作？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-05-14 02:59:56
this.checkIFvat(obj.vatValue)会导致该错误，因为您正在渲染中设置状态。创建一个函数来计算设置invoiceDetails的地方的增值税。
calculateTotalVat = (items) => {
if (!items) {
return 0;
}
let totalVat = 0;
items.forEach(obj => {
totalVat += obj.vatValue;
});
return totalVat;
}
this.setState({
invoiceDetails: data,
totalVat: this.calculateTotalVat(data),
});然后在地图中检查obj.vatValue > 0是否显示*或空白字符串
{this.state.invoiceDetails.map(obj => {
return (
<tr>
<td>
{obj.quantity * obj.salePrice} {obj.vatValue > 0 ? '*' : ''})}
</td>
</tr>
);
})}Stack Overflow用户
发布于 2019-05-14 02:48:43
您在render方法中调用this.checkIFvat() (即调用this.setState)，因此您将获得最大的更新问题。
Stack Overflow用户
发布于 2019-05-14 03:11:34
除非您需要将总增值值存储为组件的状态，否则您可以使用以下解决方案：
render() {
const { invoiceDetails } = this.state;
const totalVat = invoiceDetails.reduce((acc, invoiceDetail) => {
return acc + invoiceDetail.vatValue;
}, 0);
const rows = invoiceDetails.map(obj => {
return (
<tr>
<td>
{obj.quantity * obj.salePrice} {obj.vatValue > 0 && "*"}
</td>
</tr>
);
});
return (
<>
{rows}
<p>Vat 11%{totalVat}</p>
</>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56118162
复制相关文章
相似问题