JS對象解析在不實例化變量的情況下訪問屬性以進行評估

Question

我正在改進我的React js代碼，使用ESLint和eslint-config-airbnb ，我收到類型錯誤：

• [eslint]必須使用解構道具賦值（反應/解構 - 賦值）

我可以通過使用JS Object解構來克服這些錯誤，並在必要時聲明其他變量。

在下面的代碼片段中，我使用對象解構來填充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 ，這似乎不是一個有用的權衡（再次，對我而言 ，但我認為這不重要，你的是）。

Answer 2

根據您更新的問題，您應該能夠做到：

 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