Question

im试图从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>

我应该怎么做才能使它工作

Answer 1

您正在render方法中调用this.checkIFvat（）（即调用this.setState），因此，您将遇到最大的更新问题。

Answer 2

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

Answer 3

除非您需要将增值税总额存储为组件状态，否则可以使用以下解决方案：

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

计算状态数组的值时，超过最大更新深度

3 个答案: