创建新数组与在反应中修改相同的数组

Question

以下是一段运行良好的代码，但我有一个疑问 - const _detail = detail;map 方法中的代码。在这里您可以看到我正在迭代一个数组并修改对象，然后将其设置为setState().代码块 -checkInvoiceData = (isUploaded, data) => {    if (isUploaded) {        const { invoiceData } = this.state;        invoiceData.map(invoiceItem => {            if (invoiceItem.number === data.savedNumber) {                invoiceItem.details.map(detail => {                    const _detail = detail;                    if (_detail.tagNumber === data.tagNumber) {                        _detail.id = data.id;                    }                    return _detail;                });            }            return invoiceItem;        });        state.invoiceData = invoiceData;    }    this.setState(state);};这种方法在React世界上是否可行，或者我应该做类似的事情 -const modifiedInvoiceData = invoiceData.map(invoiceItem => {  ......   code  ......})this.setState({invoiceData: modifiedInvoiceData});每种方法的优缺点是什么？在采用其中一种方法时我需要牢记哪种情况？

Answer 1

也许尝试这样的事情：

checkInvoiceData = (isUploaded, data) => {

  // Return early

  if (!isUploaded) return

  const { invoiceData } = this.state;

  const updatedInvoices = invoiceData.map(invoiceItem => {

    if (invoiceItem.number !== data.savedNumber) return invoiceItem

    const details = invoiceItem.details.map(detail => {

      if (detail.tagNumber !== data.tagNumber) return detail

      return { ...detail, id: data.id };

    });

    return { ...invoiceItem, details };

  });

  this.setState({ invoiceData: updatedInvoices });

};

首先，我建议尽早返回而不是嵌套条件。

其次，确保您没有state直接变异（例如 no this.state = state）。

第三，将你想要改变的状态部分，而不是整个状态对象，传递给setState.

第四，返回对象的一个新实例，以便对象引用更新，以便 React 可以检测到值的变化。

我并不是说这是做你想做的最好的方法，但它应该为你指明一个更好的方向。

Answer 2

您不能改变状态，而是可以执行以下操作：

checkInvoiceData = (isUploaded, data) => {

  if (isUploaded) {

    this.setState({

      invoiceData: this.state.invoiceData.map(

        (invoiceItem) => {

          if (invoiceItem.number === data.savedNumber) {

            invoiceItem.details.map(

              (detail) =>

                detail.tagNumber === data.tagNumber

                  ? { ...detail, id: data.id } //copy detail and set id on copy

                  : detail //no change, return detail

            );

          }

          return invoiceItem;

        }

      ),

    });

  }

};