代码之家 › 专栏 › 技术社区 › MattG

JS对象销毁以访问用于评估的属性,而不实例化变量

eslint reactjs javascript

MattG · 技术社区 · 6 年前

我正在改进我的 react js code,using eslint with eslint config airbnb ,I am getting errors of type:。

[eslint]必须使用destructuring props assignment(react/destructuring assignment)

我可以通过使用JS来克服这些错误,如有必要,还可以声明其他变量。

在下面的片段中,我使用对象销毁来填充cat变量。但是,如果我想做一个“if”语句,有条件地反对对象破坏输出,我不能不做一个2步的过程,其中:

声明变量以使用通过对象销毁填充它
在“if”语句中使用该变量。

有什么方法可以做到这一点而不必声明这个“临时”变量,但仍然可以通过对象销毁来访问内部对象属性,以便在内部使用,例如“if”语句。

我在下面尝试了注释代码,但它不编译。

const animals={
猫:“棕色”,
狗:“白色”
};
让猫;
({
猫
} =动物);

控制台日志(cat);

如果(cat==“棕色”)。{
console.log(“猫是棕色的”);
};

//现在,同样的“if”语句,但是这次我用上面第6到8行替换了名为“cat”的变量
/*
如果({)
猫
}=动物)==“棕色”)){
console.log(“猫是棕色的”);
};
*/


   
    下面是出现错误的实际代码,我刚刚构建了上面的示例,以关注JS语法:
   
   atest()。{
如果(this.state.shouldtoggle==true){
this.setState(activetabkey:'你好')
}否则{
清除间隔(this.state.timerid)
}
}
< /代码> 

this.state.shouldtoggle-带下划线,错误为“[eslint]必须使用析构函数状态赋值(react/destruction赋值)”。

.具有eslint-config-airbnb,我收到类型错误:


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


我可以通过使用JS来克服这些错误Object destructuring如有必要,声明附加变量。

在下面的片段中,我使用对象销毁来填充cat变量。但是,如果我想对销毁输出的对象执行“if”语句,那么在以下情况下,如果不执行两步过程,我将无法执行此操作:


声明变量以使用通过对象销毁填充它
在“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/destruction赋值)”。

2 回复 | 直到 6 年前

T.J. Crowder 6 年前

对我来说,很奇怪的是,埃斯林特抱怨没有在那里使用破坏。但很明显,这意味着你的选择是:

如果不喜欢规则的要求,请禁用该规则。 (如果它真的需要在代码中使用析构函数-而且我没有理由怀疑你的截图-这个规则看起来有点愚蠢我但这既不在这里也不在那里。)
因为它要求您使用析构函数,在这个例子中它要求您使用析构函数赋值(因为您没有要析构函数的参数),这意味着您必须为它赋值,这意味着创建不必要的变量/常量:
```
aTest() {
  const {shouldToggle, timerId} = this.state;
  if (shouldToggle === true) {
    this.setState({ activeTabKey: 'hello' })
  } else {
    clearInterval(timerId)
  }
}
```
防止重复 this.state 但是让你重复 shouldToggle 和 timerId 相反,这似乎不是一个有用的权衡我但我的观点并不重要,你的是)。

Bhojendra Rauniyar 6 年前

根据您更新的问题,您应该能够做到:

 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