React中使用Object.entries渲染表格无预期效果的问题求助

核心问题是你用了forEach遍历数据，forEach没有返回值，React无法渲染undefined，所以表格tbody部分没生成任何行。

修正后的代码 #

return (
  <div>
    <table className="table table-striped"> {/* 修正类名拼写：stripped → striped */}
      <thead>
        <tr>
          <th>Name</th>
          <th>Profit in KRW</th>
          <th>Profit %</th>
        </tr>
      </thead>
      <tbody>
        {Object.entries(data).map(([key, value]) => (
          <tr key={key}> {/* 给循环元素加唯一key，React要求 */}
            <td>{key}</td>
            <td>{value['profit_krw']}</td>
            <td>{value['profit_perc']}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
)

关键修改点 #

• 把forEach换成map：map会遍历数组并返回新的JSX元素数组，React能直接渲染这个数组。
• 添加key属性：React要求列表元素必须有唯一key，这里用对象的键（ada、btc）刚好合适。
• 修正Bootstrap类名：table-stripped改为table-striped，确保条纹样式生效。

补充优化（可选） #

如果data可能为空，可加个空状态提示：

{Object.entries(data).length > 0 ? (
  Object.entries(data).map(([key, value]) => (
    <tr key={key}>
      <td>{key}</td>
      <td>{value['profit_krw']}</td>
      <td>{value['profit_perc']}</td>
    </tr>
  ))
) : (
  <tr>
    <td colSpan={3}>暂无数据</td>
  </tr>
)}

内容的提问来源于stack exchange，提问作者hjun