[英]Passing in state as a prop to another component in react
In my component, I fetch all data from my DB. 在我的组件中,我从数据库中获取所有数据。
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);
});
}
This fetches all data from Experiments
table and stores it into the experimentData
state correctly. 这会从“ Experiments
表中获取所有数据,并将其正确存储到experimentData
状态。
Now I try to render it my passing it into another component called ListRow
. 现在,我尝试将其传递到另一个名为ListRow
组件中,以进行渲染。
<div className="experiments-list-container">
<ListRow rowItems={this.state.experimentData}/>
</div>
The render in my ListRow
component looks like 我的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>
);
}
When I console.log it, it displays the right data : 当我console.log它,它显示正确的数据:
(5) [{…}, {…}, {…}, {…}, {…}]
0:
{id: 1, name: "test", owner: "hdsfds", status: null}
...
Something like this format. 类似于这种格式。
However, it displays nothing on my page. 但是,它在我的页面上什么也不显示。
How can I fix it? 我该如何解决?
It seems like you're passing an array down to your ListRow component. 似乎您正在将数组向下传递到ListRow组件。 You need to use a map function to return each item. 您需要使用地图函数来返回每个项目。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.