Реагируйте на карты JS, используя цикл For - PullRequest
Новая
       1

Реагируйте на карты JS, используя цикл For

0 голосов
/ 18 октября 2019

Мне не удается динамически создать более одной «Карты» на моей веб-странице 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.

Ответы [ 3 ]

1 голос
/ 18 октября 2019

Ты не зациклен. Вы запускаете цикл, но затем делаете 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>
        ));
    }
}
1 голос
/ 18 октября 2019

Не возвращайте карты в цикле, они вернутся на первой итерации. Создайте массив и вставьте карточки в этот массив. 

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()}
1 голос
/ 18 октября 2019

Я думаю, вы ничего не возвращаете из 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;
...