Question

在我的组件中，我从数据库中获取所有数据。

  constructor(props: ExperimentProps) {
    super(props);
    this.state = {
      viewActive: true,
      experimentData : [],
    };


  componentWillMount() {
    //this.props.fetchExperiments();
    makeQuery(ExperimentsListQuery)
      .then(responseData => {

        this.setState(prevState => ({
          experimentData: responseData.Experiments
        }))
      })

      .catch(err => {
        //actions.setSubmitting(false);
        console.log(err);
      });
  }

这将从Experiments表中获取所有数据并将其正确存储到experimentData状态。

现在我尝试将其传递给另一个名为ListRow的组件。

<div className="experiments-list-container">
  <ListRow rowItems={this.state.experimentData}/>
</div>

我的ListRow组件中的渲染类似于

render() {
  console.log('rowItems', this.props.rowItems)
  const dateDisplay = moment(this.props.createdAt).format('MMM YYYY');
  return (
      <tr className="experiment-list__row" onClick={this.handleRowClick}>
        <td className="experiment-list--col__check">
          <Checkbox />
        </td>
        <td>{this.props.rowItems.name}</td>
        <td>{this.props.rowItems.owner}</td>
        <td>{dateDisplay}</td>
      </tr>
  );
}

当我在console.log中时，它会显示正确的数据：

(5) [{…}, {…}, {…}, {…}, {…}]
0:
{id: 1, name: "test", owner: "hdsfds", status: null}

...

像这种格式。

但是，它在我的页面上没有显示任何内容。

我该如何解决？

Answer 1

您似乎正在将数组传递给ListRow组件。您需要使用map函数返回每个项目。

将状态作为支柱传递给另一个反应组件

1 个答案: