[英]Can't render return statements inside map function in React
I am trying to render components from a function inside my render statement.我正在尝试在我的渲染语句中从 function 渲染组件。 I have two map functions and I am trying to return the code.
我有两个 map 函数,我正在尝试返回代码。 Here is a part of my code:
这是我的代码的一部分:
renderRNAseq() {
const rnaSeq = [];
if (this.state.dataLoaded) {
this.state.resources.map(resource => {
if (resource.category == 'RNA-seq') {
rnaSeq.push(resource);
}
})
return (
rnaSeq.map(res => {
console.log(res);
<Container>
<Row>
<Col sm={4}>
<div className="webApp" key={res.id}>
<Link to={`/apps/${res.parameter}`}><img src={res.logo} /> </Link>
<h4>{res.title}</h4>
</div>
</Col>
</Row>
</Container>
}))
} else {
<p>Loading...</p>
}
}
render() {
return (
<Container className="apps">
{this.renderRNAseq()}
</Container>
)
}
When I did console log, they returned all of the objects in the rnaSeq array, so I know the objects are being pushed into the array, and they should return... but they're not rendering on my site.当我做控制台日志时,他们返回了 rnaSeq 数组中的所有对象,所以我知道这些对象正在被推入数组中,它们应该返回......但它们没有在我的网站上呈现。 What's the issue?
有什么问题?
Thanks!谢谢!
renderRNAseq() {
const rnaSeq = [];
if (this.state.dataLoaded) {
this.state.resources.map(resource => {
if (resource.category == 'RNA-seq') {
rnaSeq.push(resource);
}
})
return (
rnaSeq.map(res => {
return <Container>
<Row>
<Col sm={4}>
<div className="webApp" key={res.id}>
<Link to={`/apps/${res.parameter}`}><img src={res.logo} /> </Link>
<h4>{res.title}</h4>
</div>
</Col>
</Row>
</Container>})
)
} else {
return <p>Loading...</p>
}
}
return (
rnaSeq.map(res => {
return (
<Container>
<Row>
<Col sm={4}>
<div className="webApp" key={res.id}>
<Link to={`/apps/${res.parameter}`}><img src={res.logo} /> </Link>
<h4>{res.title}</h4>
</div>
</Col>
</Row>
</Container>
)
}));
}
or或者
return (
rnaSeq.map(res => (
<Container>
<Row>
<Col sm={4}>
<div className="webApp" key={res.id}>
<Link to={`/apps/${res.parameter}`}><img src={res.logo} /> </Link>
<h4>{res.title}</h4>
</div>
</Col>
</Row>
</Container>
)
));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.