मैं 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>

यह काम करने के लिए मुझे क्या करना चाहिए

0
isso kd 13 मई 2019, 21:42

3 जवाब

सबसे बढ़िया उत्तर

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>
);
})}
1
Junius L. 13 मई 2019, 18:59

आप रेंडर विधि के अंदर this.checkIFvat() (जो this.setState को कॉल कर रहे हैं) को कॉल कर रहे हैं, इसलिए परिणामस्वरूप आपको अधिकतम अपडेट समस्या मिल रही है।

1
Muhammad Bilal 13 मई 2019, 18:48

जब तक आपको कुल वैट मान को घटक की स्थिति के रूप में संग्रहीत करने की आवश्यकता नहीं है, आप निम्न समाधान का उपयोग कर सकते हैं:

  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>
      </>
    );
  }
1
mrJoe 13 मई 2019, 19:11