如何在 React 中更改嵌套 object 內的 state

Question

嗨，我有父子組件。 父組件正在從服務器接收數據。 此數據保存在 state.data 中。 現在，當我在子組件中執行操作時，它應該是來自父 controller 的調用方法。 現在正在工作。 問題出在我正在調用的這個方法中。 我收到 id 作為參數。 父項中的此數據具有項目（包）列表，並且每個項目都有 id。 我只需要通過 id 更新其中一個（或其他我不知道正確方式的方式）。 請問我該怎么做？ 我需要更新 isOpen state 僅通過單擊子組件中的按鈕打開一個項目

changeIsOpenState(typeOfPart: Number, id: Number) {
        console.log(this.state.data.packages);
        const selectedObject = this.state.data.packages.filter((obj) => {
            const val= (obj.id === id) ? obj : false;
            return val;
        });
    }

我要更新的數據數組（isOpen 屬性）。

Answer 1

不變的呢？ 我認為您可以通過這種方式使用dot-prop-immutable package：

const state = {
  packages: [
    { isOpen: false, id: 1 },
    { isOpen: false, id: 2 },
    { isOpen: false, id: 3 }
  ]
};
const index = state.packages.findIndex(obj => obj.id === 3);
const newState = dotProp.set(state, `packages[${index}].isOpen`, true);

Answer 2

你可以這樣做：

changeIsOpenState(typeOfPart: Number, id: Number) {
  // Copy the packages so you won't mumtate your state directly
  const packages = Object.assign({}, ...this.StaticRange.data.packages);

  // Get the package to edit and its index in the packages object
  let packageIndex;
  let packageToEdit;

  for(let i = 0; i <= packages.length; i++){
    if(packages[i].id === id){
      packageIndex = i;
      packageToEdit = packages[i];
      packageToEdit.isOpen = true
    }
  }
  packages[packageIndex] = packageToEdit;
  setState({...this.state, data:{...this.state.data, packages}});
}

Answer 3

我是這樣做的： 1.我將當前數據復制到另一個變量 2.按 id 過濾數據 3.保存具有相同 id 的項目的數組鍵 4.用否定更改克隆值 5.將新數據保存到 state

 changeIsOpenState(typeOfPart: Number, id: Number) {
        const subjectDataCopy = cloneDeep(this.state.data);
        const keys = [];
        subjectDataCopy.packages.filter((obj, key) => {
            if (obj.id === id) {
                keys.push(key);
            }
        });
        subjectDataCopy.packages[keys[0]].isOpen = !subjectDataCopy.packages[keys[0]].isOpen;
        this.setState({data: subjectDataCopy});
    }

如果有更好的選擇，請告訴我:)