componentDidUpdate无法识别状态更改

Question

<script> let name = 'John Doe', age = '30'; let showName = ` My name is ${name} --> Auto insert a tab My age is ${age} --> Auto insert a tab `; </script> 发生更改时，supplier._id无法识别更新。这是因为它嵌套了吗？我在这里想念什么？

路径：componentDidUpdate

React.js

Answer 1

问题-状态突变

在supplier = Object.assign(supplier, selectedSupplier);中，supplier是状态引用。您将selectedSupplier“合并”到该引用的对象中。这会使状态对象supplier发生突变。 Object.assign返回目标对象，将其保存回supplier，然后更新状态。 supplier的对象引用从不更改。

解决方案-浅拷贝supplier状态然后更新

handleUpdateForm(fieldsToUpdate, inputName, inputValue) {
  let { supplier, suppliers } = this.state;

  if (fieldsToUpdate === 'supplierFields') {
    if (inputName === 'supplier_id') {
      const selectedSupplier =
        inputName === 'supplier_id'
          ? suppliers.find((supplier) => supplier._id === inputValue)
          : null;

      if (selectedSupplier) {
        supplier = {
          ...supplier, // <-- shallow copy existing state
          ...selectedSupplier, // <-- merge new supplier data
        };
      }
    } else {
      supplier = {
        ...supplier, // <-- shallow copy existing state
        _id: inputName === 'name' ? '' : supplier._id // <-- update property
        [inputName]: inputValue, // <-- merge input update
      };
    }
  }

  this.setState({
    supplier
  });
}

Answer 2

问题很可能在于您如何设置状态以及如何提取状态值。由于您正在使用

this.setState({
    supplier
  });

您没有将状态与supplier属性合并。因此，使用setState后，您的状态必定是这样的：

state = {
  _id: "XXXXXXXXX",
  name: "XXXXXXXX",
  supplier:{
    _id: '',
    _name: ''
  }
}

因此，为了解决此问题，您应该更改setState以在supplier属性上不变地设置状态，例如：

this.setState({
        supplier: {...supplier}
      });

要记住的主要事情是，setState将您对属性所做的任何更改与状态的其余部分合并。

Answer 3

问题出在这部分代码

 supplier = Object.assign(supplier, {
        [inputName]: inputValue
 });

Object.assign将第一个参数作为目标，其余参数作为源，这意味着将采用第一个参数对象引用，以便您直接更新供应商对象，这就是为什么它不调用componentDidUpdate的原因。试试这个-

 supplier = Object.assign({}, supplier, {
        [inputName]: inputValue
 });

在代码段上方将创建一个新对象