ReactJs Обновление состояния аналогичного значения свойства

Question

У меня есть две переменные a и b в состоянии. которые оба копируются одной константной переменной. (все являются вложенным массивом).

Всякий раз, когда я пытаюсь обновить a, он обновляет b также, я не знаю, в чем проблема?

См. Демоверсию codesandbox: https://codesandbox.io/s/busy-maxwell-xvu5w

Код:

<code>import React from "react";
const filterAttributes = [
  {
    name: "gender",
    searchable: false,
    search: "",
    values: ["Male", "Female", "Child", "Other"]
  },
  {
    name: "size",
    searchable: false,
    search: "",
    values: ["30", "35", "15", "55", "10"]
  },
  {
    name: "brand",
    searchable: true,
    search: "",
    values: [
      "Amazon",
      "Flipkart",
      "Apple",
      "Vivo",
      "Oppo",
      "Samsung",
      "Twitter"
    ]
  }
];

export default class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      a: [...filterAttributes],
      b: [...filterAttributes]
    };
  }
  changeA = () => {
    let a = [...filterAttributes];
    a[0].search = "d-1--d";
    this.setState({ a: [...a] });
  };
  render() {
    return (
      <div>
        <pre style={{ maxWidth: "100%", overflowX: "scroll" }}>
          <div>A: {JSON.stringify(this.state.a)}</div>
          <hr />
          <div>B: {JSON.stringify(this.state.b)}</div>
        

Изменить A Изменить B ); }}

Answer 1

let a = this.state.a;
a[0] = { ...a[0], ...{ search: "3-1--d" } };
this.setState({ a });

Используя оператор распространения, мы также можем сделать копию объекта. Так как это только мелкие клоны, он будет только на go один уровень глубины.

Answer 2

Оператор распространения распространяется только на один уровень (мелкое копирование). Это означает, что на объекты в вашем массиве все еще ссылаются. Я бы порекомендовал использовать loda sh для глубоких копий, но также есть и такой способ:

this.state = {
      a: JSON.parse(JSON.stringify(filterAttributes)),
      b: JSON.parse(JSON.stringify(filterAttributes))
    };