React中无法将对象数据正确渲染到表格的问题求助

你的代码存在三处会直接导致渲染失败/异常的问题：

• map回调无返回值：你给ctx.users.map传入的回调函数使用大括号包裹内部逻辑，但没有显式写return返回生成的<tr>节点，最终userdata是全为undefined的数组，表格自然没有内容。
• 属性名拼写不匹配：你定义的用户数据中密码字段名为passwords（末尾带s），但渲染时读取的是user.password（无末尾s），即使节点正常返回，密码列也会显示为空。
• 基础语法错误：定义ctx对象的users数组时，第二个用户对象缺少闭合大括号，写完passwords:'password'后直接接了数组闭合符]，会直接导致代码编译不通过。

修正以上问题即可正常渲染，完整可运行代码如下：

function AllData(){
  const ctx = {
    users: [
      {name:'john', email:'john@email.com', passwords:'password'},
      // 补全第二个用户对象的闭合大括号，修复语法错误
      {name:'smith', email:'smith@email.com', passwords:'password'}
    ]
  };
  const userdata = ctx.users.map((user) => {
    // 显式return返回JSX节点，同时修正密码字段名为passwords
    // 额外补充：列表渲染需给根节点加唯一key属性，避免虚拟DOM渲染异常
    return (
      <tr key={user.email}>
        <td>{user.name}</td>
        <td>{user.email}</td>
        <td>{user.passwords}</td>
      </tr>
    )
  });

  return (
    <table className="table">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
          <th scope="col">Password</th>
        </tr>
      </thead>
      <tbody>
        {userdata}
      </tbody>
    </table>
  );
}

小技巧：如果想省略return关键字，可以把箭头函数的大括号替换为圆括号，直接包裹返回的JSX即可，写法如下：

const userdata = ctx.users.map((user) => (
  <tr key={user.email}>
    <td>{user.name}</td>
    <td>{user.email}</td>
    <td>{user.passwords}</td>
  </tr>
));

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