Максимальная глубина обновления превышена при подсчете значений массива в состоянии

Question

я пытаюсь посчитать значение из 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

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 2

Если вам не нужно хранить общее значение НДС в качестве состояния компонента, вы можете использовать следующее решение:

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

Answer 3

Вы вызываете this.checkIFvat () (который вызывает this.setState) внутри метода render, в результате вы получаете максимальную проблему с обновлением.