遍歷對象數組並返回每個 object 的鍵和值

Question

我有以下數組：

const cuisines = [
   { african: "African" },
   { american: "American" },
   { arabian: "Arabian" },
   { argentine: "Argentine" },
   { asian: "Asian" },
   { asian_fusion: "Asian Fusion" },
   { australian: "Australian" },
   { austrian: "Austrian" },
   { bbq: "BBQ" },
   { bakery: "Bakery" }
]

我有以下 React JSX 代碼循環遍歷數組中的每個 object：

<select name="cuisines" id="cuisines" size={10} multiple className="form-control" onChange={e => handleMultiple('cuisines', e)}>
   {cuisines.map((cuisine, index) => {
      for (let [key, value] of Object.entries(cuisine)) {
         return <option key={index} value={key}>{value}</option>
      }
   })}
</select>

我得到了結果並且工作正常，但我的 IDE 通知我以下消息： 'for' statement doesn't loop為什么我看到這個消息？

另外我想知道是否使用 for...of 循環遍歷 object 條目並返回 JSX 代碼是我的示例案例中的最佳方法，或者是否有任何其他我可以遵循的更好的方法。

Answer 1

為什么我看到消息“ 'for' 語句不循環”？

因為你在循環體中有一個無條件的return語句，這導致循環永遠不會超過第一次迭代。 當然，考慮到你必須處理的奇怪數據格式，這有點像你想要的，但 linter 仍然抱怨它。 在代碼中表達這一點的更好方法可能是

const entries = Object.entries(cuisine);
if (entries.length) {
    const [key, value] = entries[0];
    return <option key={index} value={key}>{value}</option>
}

如果您絕對確定每個 object 將具有至少一個屬性，則可以省略if條件，並且不關心如果它們沒有引發異常：

const [key, value] = Object.entries(cuisine)[0];
return <option key={index} value={key}>{value}</option>

（理想的解決方案當然是更改cuisines的格式，例如更改為Map而不是數組）