0

我有以下数组：

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 代码来循环遍历数组中的每个对象：

<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 循环遍历对象条目并返回 JSX 代码是否是我的示例案例中的最佳方法，或者是否有任何其他我可以遵循的更好的方法。

4

1 回答 1

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>
}

如果您绝对确定每个对象将具有至少一个属性，则可以省略该if条件，并且不关心如果它们没有引发的异常：

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

（理想的解决方案当然是将 的格式更改cuisines为 aMap而不是数组）

于 2020-04-08T15:17:50.040 回答