javascript - 使用 For 循环 React JS 卡

Question

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

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

projects.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

我认为您没有从toggleCategories 返回任何内容。

这行得通吗？

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;