React中使用Object.entries循环渲染option标签不显示是什么问题？

• 核心问题是你使用了Array.prototype.forEach()执行遍历，该方法的返回值固定为undefined，因此JSX中对应的位置没有任何可被React渲染的内容，即使回调函数内执行了<option>相关逻辑，也不会被传递到渲染层，最终只会生成空的select标签。
• 补充：你调试时能看到<option>生成逻辑被执行，是因为forEach确实会运行每一次回调，但回调内的<option>元素没有被返回收集，自然无法出现在最终生成的HTML中。

将forEach替换为Array.prototype.map()，同时保证回调返回<option>元素即可，修改后代码如下：

{buyTicketData?.pricingOptions && (
  <select className={"select_1"}>
    {Object.entries(buyTicketData?.pricingOptions).map(
      ([key, value]) => <option key={key}>{value.name}</option>
    )}
  </select>
)}

• map方法会将每一次回调的返回值收集为一个新数组，React支持直接渲染合法的React元素数组，因此上述代码中的<option>可以正常渲染到select节点下。
• 如果你需要在回调内写额外的处理逻辑，使用带大括号的箭头函数时要手动添加return语句：

.map(([key, value]) => {
  // 此处可添加自定义处理逻辑
  return <option key={key}>{value.name}</option>
})

内容的提问来源于stack exchange，提问作者János