Question

两种状态都在更新。

我有2个状态为array1和array2的数组，它们都映射到2个不同的表上，如果我拖到第二个表上，则使用e.dataTransfer.getData（'id' ），我将其设置为获取该项目，然后在array2上设置setState，以添加过滤后的项目。

我尝试使用传播运算符来防止状态发生变化，但仍继续进行编辑。

项目是一个对象。

放置处理程序：

handleDrop = (e) => {
    const { array1, array2 } = this.state
    const id = e.dataTransfer.getData('id')
    const item = [...array1].filter(item => item.id === id)[0]
    const newArray2 = [ ...array2, item ]
    this.setState({ array2 : newArray2 })
}

项目的标题：

editItemTitle = (id, title) => {
    const { array2 } = this.state
    const index = [...array2].findIndex(item => item.id === id)
    let newArray2 = [...array2]
    newArray2[index].values.title = title
    this.setState({array2: newArray2})
  }

我希望array1保持不变，但是它也会被更新。

Answer 1

这是因为item是一个对象/数组，并且在handleDrop函数中，我们将item设置为newArray2的最后一个元素。这将复制引用，而不是复制item。

为避免这种情况，请尝试复制（浅/深，视需要而定），如下所示（浅复制，假设item是object）

 const newItem = { ...item };
 newItem.value = { ...item.value };
 const newArray2 = [ ...array2, newItem ];

拖放后更新array2的状态，更新作为拖放源的array1

1 个答案: