Блог

Главная - Вопросы по программированию - Почему объектный ключ без [] не будет принимаемым параметром?

Почему объектный ключ без [] не будет принимаемым параметром?

#javascript #reactjs

#javascript #reactjs

Вопрос:

Код представляет собой общий обработчик переключения состояния компонента. Кажется, я не могу понять, почему первый набор кода создает новое свойство key name, в то время как второй набор кода использует принятый параметр.

  controlToggle = (property) => {
    this.setState({property: !this.state.property})
  }
  
  controlToggle = (property) => {
    this.setState({[property]: !this.state.property})
  }

Комментарии:

1. похоже, вам нужно вычисляемое имя свойства . если нет, вы принимаете ключ property вместо значения переменной.

2. В первом примере вы передаете объект с ключом property , поэтому react установит его в состояние; то есть ключ для 'property' . Во втором, [property] создаст ключ независимо от аргумента property

Ответ №1:

Вы используете [] при настройке или получении динамического ключа объекта. Если вы не укажете ключ внутри [] , он будет использовать имя переменной в качестве ключа внутри объекта, который в вашем случае является property

Так, например

 controlToggle = (property) => {
    this.setState({property: !this.state.property})
}

Приведенный выше код установит состояние с ключом как property

В то время как правильный способ 

 controlToggle = (property) => {
    this.setState({[property]: !this.state[property]})
}

Ответ №2:

Я думаю, это потому, что в JavaScript для такой пары ключ-значение, как {XXX: YYY} , он автоматически обрабатывает первый XXX как имя ключа / свойства значения, поэтому вам нужно добавить скобки [], чтобы «экранировать» этот шаблон, чтобы использовать значение переменной в качестве ключа вместо того, чтобы рассматривать его по существу как строку.

Более конкретно, материал внутри скобок [] будет обрабатываться как обычный код JavaScript и «вычисляться«