使用 For 循环反应 JS 卡

Question

我无法在我的 React 网页中动态生成多个"卡"。我从数据库导入数据.js，但我显然没有正确实现 For 循环。

我已经在 render(( 之外的函数中尝试了循环，但这不起作用。我需要 for 循环来生成数据库中有多少对象，但我被困在一个对象上。我可以在 thml 代码中的 {} 中调用数据，但仅此而已。

项目.js

class Projects extends Component {
constructor(props) {
super(props);
this.state = { activeTab: 1 };
}
toggleCategories() {
if (this.state.activeTab === 1) {
for (let data of database) {
return (
<div className='projects-grid'>
<Card shadow={4} style={{ minWidth: '450', margin: 'auto' }}>
<CardTitle style={{height: '250px', background: data.image }}></CardTitle>
<CardText>
{data.name}
</CardText>
<CardActions border>
<Button colored>GitHub</Button>
<Button colored>Live Demo</Button>
</CardActions>
</Card>
</div>
)
}
}```
**database.js**
let database = [
{
name: 'Trombinoscope',
image: 'url(https://i.ibb.co/g4mT3K5/html-Css-Js.jpg)',
description: 'Group project',
languages: 'HTML, CSS, JavaScript'
},
{
name: 'CRUD System',
image: 'url(https://i.ibb.co/g4mT3K5/html-Css-Js.jpg)',
description: 'Video game database',
languages: 'PHP, SQL'
}
]
export default database;

Any help would be appreciated.

Answer 1

我认为您没有从切换类别返回任何内容。

这行得通吗？

class Projects extends Component {
constructor(props) {
super(props);
this.state = { activeTab: 1 };
}
toggleCategories() {
if (this.state.activeTab === 1) {
return database.map(data => {
return (
<div className='projects-grid'>
<Card shadow={4} style={{ minWidth: '450', margin: 'auto' }}>
<CardTitle style={{height: '250px', background: data.image }}></CardTitle>
<CardText>
{data.name}
</CardText>
<CardActions border>
<Button colored>GitHub</Button>
<Button colored>Live Demo</Button>
</CardActions>
</Card>
</div>
})
}```
**database.js**
let database = [
{
name: 'Trombinoscope',
image: 'url(https://i.ibb.co/g4mT3K5/html-Css-Js.jpg)',
description: 'Group project',
languages: 'HTML, CSS, JavaScript'
},
{
name: 'CRUD System',
image: 'url(https://i.ibb.co/g4mT3K5/html-Css-Js.jpg)',
description: 'Video game database',
languages: 'PHP, SQL'
}
]
export default database;

Answer 2

你没有循环。您正在启动一个循环，但随后在第一次循环迭代中执行return，这会停止循环。如果toggleCategories应该渲染所有这些卡片，通常的做法是使用map并返回一个数组：

toggleCategories() {
if (this.state.activeTab === 1) {
return database.map(data => (
<div className='projects-grid'>
<Card shadow={4} style={{ minWidth: '450', margin: 'auto' }}>
<CardTitle style={{height: '250px', background: data.image }}></CardTitle>
<CardText>
{data.name}
</CardText>
<CardActions border>
<Button colored>GitHub</Button>
<Button colored>Live Demo</Button>
</CardActions>
</Card>
</div>
));
}
}

Answer 3

不要循环返回卡片，它将在第一次迭代时返回。创建一个阵列并在该阵列中推送卡。

toggleCategories() {
const catrgories = [];
if (this.state.activeTab === 1) {
for (let data of database) {
catrgories.push(
<div className='projects-grid'>
<Card shadow={4} style={{ minWidth: '450', margin: 'auto' }}>
<CardTitle style={{height: '250px', background: data.image }}></CardTitle>
<CardText>
{data.name}
</CardText>
<CardActions border>
<Button colored>GitHub</Button>
<Button colored>Live Demo</Button>
</CardActions>
</Card>
</div>
);
}
}
}
// use it like
{toggleCategories()}