Обновляя состояние array2 после перетаскивания, обновляет array1, которая является источником перетаскивания

Question

Оба состояния обновляются.

У меня есть 2 массива в состоянии, array1 и array2, оба отображаются в 2 разных таблицах, если я перетаскиваю во 2-ю таблицу, я фильтрую [... array1]используя e.dataTransfer.getData ('id'), который я установил для получения элемента, затем setState для array2, который добавляет отфильтрованный элемент.

Я пытался использовать оператор распространения, чтобы предотвратить изменение состояния, но все жепродолжает редактирование.

элемент является объектом.

обработчик удаления:

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

Я ожидал массив1остаться прежним, но оно также обновляется.

Answer 1

Это потому, что item, мы надеемся, является объектом / массивом, а в функции handleDrop мы устанавливаем item как последний элемент newArray2.Это копирует ссылку, а не копирует item.

Чтобы избежать этого, попробуйте скопировать (мелкое / глубокое, в зависимости от необходимости), как показано ниже (мелкое копирование, предполагая, что item является object)

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