將狀態作為道具傳遞給反應中的另一個組件

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組件。 您需要使用地圖函數來返回每個項目。