React中传递state作为props给子组件后页面无数据显示如何解决？

开发者阿泽

2026-5-28

问题：传递数组数据给子组件后页面无内容显示

我看了你的代码，问题很明确——你把整个数组传给了ListRow组件，但在子组件里却把它当成单个对象来访问属性，这就导致所有td里的内容都是undefined，自然页面上看不到东西。

具体修改方案：

1. 父组件：遍历数组，为每个数据项渲染一个`ListRow`

你需要在父组件里对experimentData数组做遍历，把每个单独的对象传给ListRow，而不是直接传整个数组。另外要记得把tr放在<table>和<tbody>标签里（HTML规范要求tr必须嵌套在这些元素中）：

<div className="experiments-list-container">
  <table>
    <tbody>
      {this.state.experimentData.map(experiment => (
        <ListRow 
          key={experiment.id} 
          rowItem={experiment} 
        />
      ))}
    </tbody>
  </table>
</div>

这里的key是React要求的，用来标识每个列表项的唯一性，用数据的id是最合适的选择。

2. 子组件`ListRow`：接收单个数据对象并渲染

修改子组件，从this.props.rowItem（单个对象）里读取属性，而不是之前的rowItems（数组）。另外你之前的createdAt也是从错误的地方取的，要从当前的rowItem里获取：

render() {
  console.log('rowItem', this.props.rowItem)
  // 从单个数据对象里取createdAt
  const dateDisplay = moment(this.props.rowItem.createdAt).format('MMM YYYY');
  return (
    <tr className="experiment-list__row" onClick={this.handleRowClick}>
      <td className="experiment-list--col__check">
        <Checkbox />
      </td>
      <td>{this.props.rowItem.name}</td>
      <td>{this.props.rowItem.owner}</td>
      <td>{dateDisplay}</td>
    </tr>
  );
}