使用 setState() 更新嵌套数组

Question

I want to setState() to edit parameter value which is in parameterData Array . using setState method. If we can do this without any third part library like Immutabilty helper or lodash that would be great!

The Given state is

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

I have tried this solution where

idx = state index where object is situated
index = index of parameterData array to be changed
event = event of change

  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

Disclaimer: The state variables you defined are called state and setState , but in your handleChangeTextParameter you are using setTargets so I assume they are the same
I think the following should work:

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