ReactJS：如何使用动态键访问和更新嵌套状态对象？

Question

Suppose I have a component with state defined as follows:

this.state = {
    apple:{
        a:1,
        b:2,
    },
    mango:{
        banana : {
            a:1,
            b:2,
        }
    }
}

If I wanted to update the value of a nested object in my state, I could do so with hard coded keys as shown below:

cost temp =  { ...this.state['mango'] }
temp['banana']['a'] = 2;

this.setState({mango:temp});

How would I update a nested value in my state object dynamically key? For example, if I had a JSON path in either dot or array notation, how could I update my component state?

Answer 1

One way to achieve this would be to acquire the nested object that is the parent of the field that your path is targeting via Array#reduce :

const nestedObject = path
.slice(0, -1)
.reduce((object, part) => (object === undefined ? undefined : object[part]), { ...state })

And then update the last key/value of nestedObject by via the last key of your path:

/* Get last part of path, and update nestedObject's value for this key, to 2 */
const [pathTail] = path.slice(-1);    
nestedObject[pathTail] = 2;

The following snippet shows these two ideas together:

 /* Path of nested field to update, in array notation */ const path = ['mango', 'banana', 'a']; /* Components state */ const state = { apple: { a: 1, b: 2, }, mango: { banana: { a: 1, b: 2, } } }; const stateClone = { ...state }; /* Aquire the parent object (ie banana) of the target field (ie a) */ const nestedObject = path .slice(0, -1) .reduce((object, part) => (object === undefined ? undefined : object[part]), stateClone) if (nestedObject !== undefined) { /* Obtain last key in path */ const [pathTail] = path.slice(-1); /* Update value of last key on target object to new value */ nestedObject[pathTail] = 2; } /* Display updated state */ console.log('Updated state:', stateClone) /* Call this.setState: */ // this.setState(stateClone); 

Update

Here is some extra detail outlining how the reduce() part of the answer works:

path
/* slice obtains ['mango', 'banana'], seeing -1 clips last item */
.slice(0, -1)  
/* reduce iterates through each part of array ['mango', 'banana']
where at each iteration we fetch the corresponding nested object 
of the { ...state } object that's passed in */
.reduce((object, part) => {

/* At iteration 1: 
object has two keys, 'apple' and 'mango'
part is 'mango'
object is defined, so return object['mango'] for first iteration

At iteration 2:
object passed from last iteration has one key, 'banana'
part is 'banana'
object is defined, so return object['banana'] for second iteration

Reduce complete:
we return object['banana'], which is the same as state['mango']['banana']
*/

if(object === undefined) { return undefined; }

return object[part]

}, stateClone)

Answer 2

Having:

 const [formState, setFormState] = useState(
      {
        id:1,
        name:'Name',
        innerObjectName: {
            propA: 'Something',
            propB: 'Another thing',
        }
      });

Maybe you're looking for something like this:

   const handleComplexInputChange = (evt, object) => {
      setFormState({
         ...formState,
         [object] : {
            ...formState[object],
            [evt.target.name]: evt.target.value,
         }
      })
   } 

And from your component you should call it like this:

   onChange={(e) => {
        handleComplexInputChange(e, "innerObjectName");
   }}