使用 setState() 更新嵌套數組

Question

我想 setState() 來編輯parameterData Array中的參數值。 使用 setState 方法。 如果我們可以在沒有任何第三方庫（例如 Immutabilty helper或lodash）的情況下做到這一點，那就太好了！

給定的 state 是

   const[state,setState]= useState ([{
    "id": 0,
    "targets": {
        "ageGender": {
        "key":value
        },
        "parameterData": [
            {
                "id": 1,
                "parameter": "Low",
                "expression": "<",
                "val": "10",
                "indicator": "Select"
            },
            
        ]
    }
}])

我已經嘗試過這個解決方案

idx = state 索引 object 所在的位置
index = 要更改的 parameterData 數組的索引
事件 = 變化事件

  const handleChangeTextParameter = (event, index, idx) => {
    const { name, value } = event.target;

    setState((prev) => {
      const newState = prev.map((obj, index1) => {
        let fil;
        if (index1 === idx) {
          fil = obj.targets.parameterData.map((data, indexOne) => {
            if (indexOne === index) {
              return { ...data, parameter: value };
            }
            return data;
          });
          const p = obj.targets.parameterData.map(
            (obj) => fil.find((o) => o.id === obj.id) || obj
          );

          return { ...obj, targets: { ...obj.targets, parameterData: p } };
        }
      });

      return newState;
    });

    
  };

Answer 1

免責聲明：您定義的 state 變量稱為state和setState ，但在您的handleChangeTextParameter中您使用的是setTargets所以我認為它們是相同的
我認為以下應該有效：

setTargets((prev) => {
    const newTargets = prev.map((object, objectIndex) => {
        if (objectIndex !== idx) return object;
        return {
            ...object,
            targets: {
                ...object.targets,
                parameterData: object.target.parameterData.map((data, dataIndex) => {
                    if (dataIndex !== index) return data;
                    return { ...data, parameter: value };
                }),
            },
        };
    });
    return newTargets;
});