Question

我的状态上有此变量：

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

我想做的是在一个cetain项上插入一个新项的别名。我这样做了，并且在我的项上插入了一个新的alias，但是它也创建了一个新项，我不想这样做，我只想使用新的商品别名更新我的商品：

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

    itm.itemAlias.push(insertedAlias)

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

我也尝试过这种方法，但是出现了Uncaught TypeError错误：尝试传播不可迭代实例的无效尝试。

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,
    ]
  }
}))

Answer 2

您可以执行以下操作：

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

  this.setState(prevState => ({
    ...prevState,
    itemList: {
      ...prevState.itemList,
      item: prevState.itemList.item.map(i => {
        if (i.idItem === itm.idItem) {
          return {
            ...i,
            itemAlias: [...i.itemAlias, insertedAlias]
          }
        }
        return i;
      })
    }
  }))
}

仅在idItem是唯一的情况下有效。

将一个项目插入另一个处于反应状态的列表中

2 个答案: