Блог

Я работаю над проектом react js. У меня есть переменная состояния, и я инициализирую эту переменную состояния ( x_state ) другой обычной переменной ( x ) во время componentDidMount() выполнения метода. Но всякий раз, когда обновляется моя обычная переменная ( x ), она автоматически обновляет переменную состояния ( x_state ).

 export class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x_state: null
    }
    this.x = {}
  }

  componentDidMount() {
    this.setState({
      x_state: this.x
    })
  }
}
  

Локальная переменная this.x обновляется при определенных условиях внутри кода. всякий раз, когда локальная переменная this.x обновляется, она автоматически обновляет переменную состояния x_state.
Как предотвратить автоматическое обновление или автоматический вызов метода setstate

Это потому, что x это объект, и вы устанавливаете ссылку с помощью этого кода

 this.setState({
   x_state: this.x
})
  

Вы должны сделать ее копию с помощью Object.assign()

 this.setState({
      x_state: Ojbect.assign({},this.x)
})
  

Или, если this.x изначально является вложенным объектом, вы можете использовать JSON.parse(JSON.stringify())

 this.setState({
     x_state: JSON.parse(JSON.stringify(this.x))
})
  

@Maheer Ali amp; @adiga верны. Поскольку переменная состояния x_state и локальная переменная this.x указывают на один и тот же объект в памяти, они оба обновляются одновременно.

Вы также можете использовать оператор распространения для копирования свойств локального объекта в переменную состояния.

 this.setState({
   x_state: { ...this.x }
})
  

ECMAScript 6 определяет семь типов данных: Шесть типов данных, которые являются примитивами: Boolean, Null, Undefined, Число, строка, символ и объект.

Примитивные типы данных передаются по значению, а объекты — по ссылке.

Итак, когда вы думаете, что «присваиваете» значение obj1 = obj2 , вы на самом деле создаете ссылку в ( obj1 ), «указывающую» на ( obj2 ), поэтому любые изменения в ( obj2 ) будут автоматически внесены в ( obj1 ). Вы могли бы использовать любой из приведенных выше ответов или использовать оператор spread , любой метод, который возвращает мелкую копию объекта, который вы хотите скопировать. Вот интересный пост на эту тему.