javascript - 在 react 状态下将列表中的项目插入到另一个列表中

Question

我的状态有这个变量:

this.state = {
        itemList: {
            item: [
                {
                    itemAlias: [
                        {
                            name: null
                        }
                    ],
                    idItem: null,
                    itemName: null,
                }
            ]
        }
    }

我想要做的是在某个项目上插入一个新的项目别名。我这样做了，它向我的项目插入了一个新的项目别名，但同时也创建了一个新的项目，我不想那样，我只想使用新的项目别名更新我的项目:

insertAliasToList = (itm) => {
    let insertedAlias = {
        name: 'test'
    }

    itm.itemAlias.push(insertedAlias)

    this.setState(prevState => ({
        ...prevState,
        itemList: {
            ...prevState.itemList,
            item: [...prevState.itemList.item, p]
        }
    }))
}

我也尝试过此操作，但出现错误 Uncaught TypeError: Invalid attempts to spread non-iterable instance。

insertAliasToList = (itm) => {
    let insertedAlias = {
        name: 'test'
    }

   // itm.itemAlias.push(insertedAlias)

    this.setState(prevState => ({
        ...prevState,
        itemList: {
            ...prevState.itemList,
            item: {
                ...prevState.itemLIst.item,
                itemAlias:[...prevState.itemList.item.itemAlias,insertedAlias]
            }
        }
    }))
}

提前致谢!

Answer 1

由于您正在尝试替换数组中项目的内容，因此您需要首先复制该数组。然后使用索引替换该项目中所需的内容，并使用新数组再次设置状态。

let insertedAlias = {
  name: 'test'
}

// Duplicate 'item' array
const item = [...this.state.itemList.item]

// Change item using index '0' on the duplicated array
item[0] = {
  ...item[0],
  itemAlias: [
    ...item[0].itemAlias,
    insertedAlias,
  ]
}

// Set state with new item array that contains changes you made
this.setState(prevState => ({
  ...prevState,
  itemList: {
    ...prevState.itemList,
    item: [
      ...item,
    ]
  }
}))