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

Я могу преодолеть эти ошибки, используя 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] Должен использовать назначение деструктурирующего состояния (реакция / деструктурирование-назначение)"

enter image description here

1
MattG 25 Сен 2018 в 10:57

2 ответа

Лучший ответ

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

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

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

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

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

2
T.J. Crowder 25 Сен 2018 в 10:01

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

 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
1
Bhojendra Rauniyar 25 Сен 2018 в 09:27