Question

如何使用setState更新单个事件的值？也很高兴在React之外看到它是如何完成的。

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

Answer 1

您可以使用Array.map方法进行操作：

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

Answer 2

对于当前结构，只有Array.map可以提供帮助。但我可以看到里面的id字段。那么如何将结构更改为具有对象呢？

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

那么您将获得传播算子的力量：

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

我也想知道在单个元素中进行如此深层的嵌套是否有意义。也许最好在子组件中处理特定name的{{1}}。

Answer 3

正如@Oleksandr Kovpashko所述，您可以使用su，因为它会创建一个新数组。

您还可以使用.map克隆数组，然后对其进行突变。请注意，它仅克隆数组，而不克隆项目。您不应该对项目进行突变：

.slice()

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

3 个答案: