遍历对象数组和 return 每个对象的键和值

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

<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 循环遍历对象条目和 return JSX 代码是否是最好的方法，或者是否有任何其他我可以遵循的方法哪个更好

Answer 1

Why I see the message "'for' statement doesn't loop"?

因为循环体内有一个无条件的 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 的格式，例如更改为 Map 而不是数组）

遍历对象数组和 return 每个对象的键和值

Looping through array of objects and return the key and value for each object

javascript

arrays

javascript-objects

reactjs

for-of-loop