javascript - JS 对象解构以访问属性以进行评估而不实例化变量

Question

我正在改进我的 React js代码，使用ESLint与 eslint-config-airbnb ，我收到以下类型的错误:

• > [eslint] Must use destructuring props assignment (react/destructuring-assignment)

我可以通过使用 JS 来克服这些错误 Object destructuring并在必要时声明其他变量。

在以下代码片段中，我使用对象解构来填充 cat 变量。但是，如果我想执行一个“if”语句，有条件地针对对象解构输出，我无法在不执行两步过程的情况下执行此操作，其中:

1. 声明变量以通过对象解构来填充它
2. 在我的“if”语句中使用该变量。

有没有办法做到这一点而不必声明这个“临时”变量，但仍然通过对象解构访问内部对象属性以在例如“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] 必须使用解构状态赋值 (react/destructuring-assignment)”

Answer 1

对我来说，ESLint 提示没有在那里使用解构是非常奇怪的。但显然是这样，这意味着您的选择是:

1. 如果您不喜欢它的要求，请禁用该规则。 (如果它真的需要在该代码中使用解构——而且我没有理由怀疑你的屏幕截图——这条规则对我来说似乎有点愚蠢，但这既不在这里也不在那里。)

2. 由于它要求您使用解构，在该示例中它要求您使用解构赋值(因为您没有要解构的参数)，这意味着您必须要分配一些东西，这意味着创建不必要的变量/常数:

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

   这可以防止重复 this.state，但会让您重复 shouldToggle 和 timerId，这似乎不是一个有用的交易-关闭(再次，对我，但我的意见在这里并不重要，你的才是)。