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

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