Разрушение объекта JS для доступа к свойству в целях оценки без создания экземпляра переменной

Question

Я улучшаю свой код React js, используя ESLint с eslint-config-airbnb , получаю ошибки типа:

• [eslint] Должен использовать назначение реквизитов деструктурирования (реакция / деструктурирование)

Я могу преодолеть эти ошибки с помощью JS Разрушение объекта и при необходимости объявление дополнительных переменных.

В следующем фрагменте я использую деструктуризацию объектов для заполнения переменной cat.Тем не менее, если я хочу сделать оператор "if", условно для вывода с деструктуризацией объекта, я не смогу сделать это без выполнения двухэтапного процесса, в котором:

1. Объявите переменную для заполнениячерез деструктуризацию объекта
2. Используйте эту переменную в моем операторе if.

Есть ли способ сделать это без объявления этой «временной» переменной, но при этом получить доступ к внутреннейСвойство объекта посредством деструктуризации объекта для использования, например, в операторе «если».

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

const animals = {
    cat: "brown",
    dog: "white"
};
let cat;
({
    cat
} = animals);

console.log(cat);

if (cat === "brown") {
    console.log("The cat is brown");
};

// Now,  the same "if" statement, but this time I replace the variable called "cat" with lines 6 to 8 above
/*
  if (({
          cat
      } = animals) === "brown")) {
      console.log("The cat is brown");
  };
*/

Вот фактический код, который имеет ошибку, я только что построил пример выше, чтобы сосредоточиться на синтаксисе js:

 aTest() {
     if (this.state.shouldToggle === true) {
       this.setState({ activeTabKey: 'hello' })
     } else {
       clearInterval(this.state.timerId)
     }
   }

this.state.shouldToggle - подчеркивается красным с ошибкой «[eslint] Должен использовать назначение состояния деструктурирования (реакция / деструктуризация-назначение)»

Answer 1

Согласно вашему обновленному вопросу, вы должны просто сделать:

 aTest() {
  const { shouldToggle, timerId } = this.state
     if (shouldToggle) {
       this.setState({ activeTabKey: 'hello' })
     } else {
       clearInterval(timerId)
     }
   }

---

Продолжая предыдущую попытку:

if (({ cat } = animals) === "brown")) {
   console.log("The cat is brown");
};

Никогда не будет удовлетворять условию.

Когда вы присваиваете переменную с использованием синтаксиса деструктуризации, она сравнивается с самим объектом.Позвольте мне уточнить вас с помощью простых тестов:

if(({test} = {test:13})==13) {
  console.log(test); // will not be logged
}

    if(({test} = {test:13})==undefined) {
      console.log(test); // will not be logged
    }

if(({test} = {test:13})==true) {
  console.log(test); // will not be logged
}

if(({test} = {test:13})==false) {
  console.log(test);
}

if(JSON.stringify(({test} = {test:13})) == JSON.stringify({test:13}) ) {
  console.log(test); // now, this will be logged
}

---

Итак, вы сравниваете brown == { cat: 'brown', dog: 'white' }, который никогда не удовлетворит.

То, что вы должны сделать, - это назначить их в переменнойиспользуя синтаксис деструктуризации согласно ESLINT,

const { cat } = animals
if(cat === 'brown') { // Okay

Answer 2

Мне очень странно, что ESLint жалуется на то, что там не используется деструктуризация.Но, очевидно, это так, что означает, что вы можете выбрать:

1. Отключите правило, если вам не нравятся его требования. (Если это действительно требует использования деструктурирования в этом коде - и у меня нет оснований сомневаться в вашем скриншоте - правило кажется немного глупым для me , но это ни здесь, ни там.)

2. Поскольку требуется, чтобы вы использовали деструктуризацию, в этом примере требуется, чтобы вы использовали назначение деструктурирования (так как у вас нет параметров для деструктуры), что означает, что вам нужно что-то назначитьto, что означает создание ненужных переменных / констант:

   aTest() {
     const {shouldToggle, timerId} = this.state;
     if (shouldToggle === true) {
       this.setState({ activeTabKey: 'hello' })
     } else {
       clearInterval(timerId)
     }
   }
   

   Это предотвращает повторение this.state, но заставляет вас повторять shouldToggle и timerId вместо этого, что не кажется полезным компромиссом(опять же, к мне , но мое мнение не имеет значения, ваше здесь).