javascript - 循环遍历对象数组并返回每个对象的键和值

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”语句不循环为什么我看到此消息？

此外，我想知道在我的示例案例中，使用 for...of 循环对象条目并返回 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 而不是数组)