React JS中.map遍历数据无渲染内容问题排查

问题完全出在Array.map()的回调写法错误，和组件本身、CoreUI组件库都没有关系：

• 你现在给map传入的是大括号{}包裹的完整函数体，这种写法必须手动写return返回需要渲染的JSX节点，否则回调默认返回undefined，React拿不到可渲染的内容，自然页面为空。
• 你写的{data.name}只是函数体内一段无效的对象字面量写法，既没有被return，也没有被包裹在合法的JSX标签结构里，根本不会被渲染。
• 你提到相同逻辑在其他组件能正常运行，是因为其他位置的map回调大概率用的是小括号()包裹JSX的简写形式，这种写法会自动返回括号内的内容，不需要手动写return，你在当前组件里把小括号错写成了大括号，才导致渲染失效。
  另外你已经导入了ListItem组件，也没有在表格结构里使用，同时表格行CTableRow、单元格CTableDataCell的结构也缺失，就算return了data.name，也不符合CoreUI表格的结构要求。

把CTableBody内的map逻辑改成正确的带返回值的写法，补全表格结构即可：

<CTableBody>
  {props.postsListAdmin.map((data) => {
    console.log(data)
    // 大括号包裹函数体时，必须手动return要渲染的JSX
    return (
      <CTableRow key={data.id}>
        <CTableDataCell>{data.id}</CTableDataCell>
        <CTableDataCell>{data.name}</CTableDataCell>
        <CTableDataCell>
          {/* 按需引入操作项/ListItem组件 */}
          <ListItem postData={data} />
        </CTableDataCell>
      </CTableRow>
    )
  })}
</CTableBody>

如果你习惯简写形式，也可以去掉大括号，直接用小括号包裹返回的JSX，省略return：

<CTableBody>
  {props.postsListAdmin.map((data) => (
    <CTableRow key={data.id}>
      <CTableDataCell>{data.id}</CTableDataCell>
      <CTableDataCell>{data.name}</CTableDataCell>
      <CTableDataCell>
        <ListItem postData={data} />
      </CTableDataCell>
    </CTableRow>
  ))}
</CTableBody>

注意：渲染列表项时，必须给最外层的列表节点（这里是CTableRow）传入唯一的key属性，一般取数据的id字段即可，否则会触发React渲染警告，也可能导致列表更新时出现状态错乱问题。

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