遍历对象数组并返回每个对象的键和值

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循环访问对象条目并返回JSX代码是我的示例案例中的最佳方法，或者是否可以遵循其他方法？ >

Answer 1

为什么我看到消息“ 'for'语句没有循环”？

因为在循环体内有一个无条件的{ "timestamp": "2020-04-07T14:39:56.070+0000", "status": 401, "error": "Unauthorized", "message": "Unauthorized", "path": "/api/fridge/recommended-dishes" } 语句，这导致循环永远不会超出第一次迭代。当然，考虑到您必须处理的怪异数据格式，这确实是您想要的，但是短毛猫仍然对此有所抱怨。用代码表达这一点的更好方法可能是

return

如果您完全确定每个对象将至少具有一个属性，并且不关心异常是否引发异常，则可以忽略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而不是数组）