React：在状态下，我将如何在某个索引处更新嵌套对象？

Question

How would I update values of single events using setState? Also happy to see how it's done outside React.

state = {events: [{
  event1:{
    name: 'Name 1',
    id: 1,
  },
},{
  event2:{
    name: 'Name 2',
    id: 2,
  },
},{
  event3:{
    name: 'Name 3',
    id: 3,
  },
}]}

Answer 1

You can do it using Array.map method:

renameEvent(idToRename, newName) {
  this.setState(prevState => ({
    events: prevState.events.map(event => {
      if (event.id === idToRename) {
        return {...event, name: newName};
      } else {
        return event;
      }
    });
  })); 
}

Answer 2

for current structure only Array.map can help. But I can see id field inside. So how about changing structure to having object?

{
 1: {
   event1:{
    name: 'Name 1',
    id: 1,
   },
  },
 2: {
   event2:{
    name: 'Name 2',
    id: 2,
   },
 },

Then you would get power of spread operator:

this.setState(prevState => ({
    ...prevState.events,
    [idToReplace]: {
        ...prevState.events[idToReplace],
        name: 'new name',
    },
}));

Also I wondering if it make sense to have so deep nesting in single element. Maybe it'd better to deal with name of specific event inside of child component.

Answer 3

As @Oleksandr Kovpashko mentioned you can use .map since it creates a new array.

You can also use .slice() to clone the array and then mutate it. Note that it only clones the array, not the items. You should NOT mutate items:

const arr = ['one','two','three','three','five'];
const clone = arr.slice()

clone[3] = 'four';

console.log(clone);

Answer 4

Since your top-level state property ( events ) is an array, you can manipulate the value and call setState({ events: yourUpdatedEventsArray }) .

Because setState is asynchronous, you will want to do this using the setState callback:

setState(prevState => {
  const updatedEvents = prevState.events.map(event => {
    # update and return `event` as needed
  })

  return { events: updatedEvents }
})

If you weren't passing this back to React, you could modify the array in place using findIndex and then array[index].name = "foo" , but you don't want to mutate the state directly with React.