React Hooks中如何从对象数组在JSX表格展示键值两列

你当前的需求是将状态从双索引数组改成单键值对的对象数组，同时保持表格的渲染效果。这里有两种高效的实现方式：

方式一：适配现有单键值对对象数组 #

利用Object.entries()方法可以快速提取每个对象的键和值，代码逻辑和你原来的双索引数组写法对齐：

const App = () => {
  const [wordCountArr, setWordCountArr] = useState([
    {"bingo": 2},
    {"bango": 5},
    {"needless": 1}
  ]);

  return (
    <div>
      <h1>Word Count</h1>
      <table>
        <thead>
          <tr>
            <th>Word</th>
            <th>Count</th>
          </tr>
        </thead>
        <tbody>
          {wordCountArr.map((item, i) => {
            // 提取单个对象的键与值
            const [word, count] = Object.entries(item)[0];
            return (
              <tr key={i}>
                <td>{word}</td>
                <td>{count}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default App;

关键说明： #

• Object.entries(item)会把单个对象转换成[[键, 值]]的二维数组，因为每个对象只有一组键值对，直接取索引0的元素即可。
• 用解构赋值const [word, count] = ...直接拿到对应字段，代码更易读。
• 移除了多余的!!wordCountArr判断，因为React的useState初始化数组要么为空要么有元素，空数组调用map不会报错。
• 给<tr>添加了key={i}，满足React列表渲染的唯一key要求（如果后续有唯一标识的字段，建议替换成该字段）。

方式二：优化状态结构（更推荐） #

如果可以调整状态的格式，建议改成明确的键名结构，这种方式后续扩展或修改字段会更灵活：

const App = () => {
  // 修改状态为带明确键名的对象数组
  const [wordCountArr, setWordCountArr] = useState([
    {word: "bingo", count: 2},
    {word: "bango", count: 5},
    {word: "needless", count: 1}
  ]);

  return (
    <div>
      <h1>Word Count</h1>
      <table>
        <thead>
          <tr>
            <th>Word</th>
            <th>Count</th>
          </tr>
        </thead>
        <tbody>
          {wordCountArr.map(({word, count}, i) => (
            <tr key={i}>
              <td>{word}</td>
              <td>{count}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default App;

这种结构不需要额外提取键值，直接解构对象字段即可渲染，代码更简洁，也更符合React状态设计的常规思路。

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