ReactJS Как визуализировать 4 элемента подряд (элементы из API)

Question

Я извлекаю список постов из моего API, и я бы хотел расположить их, например, ->

<Row>
    <Col><Card.......></Col>
    <Col><Card.......></Col>
    <Col><Card.......></Col>
    <Col><Card.......></Col>
<Row>

Я посмотрел вокруг и нашел несколько примеров, но я тоже "«ReactJS» или они просто не работают в моем случае.

Так выглядит мой класс на данный момент ->

class ApiPosts extends Component {
    constructor() {
        super();
        this.state = {
            blogPosts: [],
        };
    }

    componentDidMount() {
        const { classes } = this.props;

        fetch('http://localhost:53595/api/public/posts', {
            method: 'get',
        })
            .then(results => {
                return results.json();
            }).then(data => {
                let blogPosts = data.map((post, index) => {
                    if (post.type === "News") {
                        if ((index % 4) === 0) {
                            return (
                                <Col xs >
                                    <Card className={classes.card} key={post.id}>
                                        <CardActionArea>
                                            <CardMedia
                                                component="img"
                                                alt={post.title}
                                                className={classes.media}
                                                height="140"
                                                image={post.imageName}
                                                title={post.title}
                                            />
                                            <CardContent>
                                                <Typography gutterBottom variant="headline" component="h2">
                                                    {post.title}
                                                </Typography>
                                                <Typography component="p">
                                                    {post.body}
                                                </Typography>
                                            </CardContent>
                                        </CardActionArea>
                                        <CardActions>
                                            <Button size="small" color="primary">
                                                Share
                                            </Button>
                                            <Button size="small" color="primary">
                                                Learn More
                                    </Button>
                                        </CardActions>
                                    </Card>
                                </Col>
                            )
                        }
                    }
                });
                this.setState({ blogPosts: blogPosts });
                //console.log("state", this.state.blogPosts);
            })
    }
    render() {

        return (
            <React.Fragment>
                <Col xs />
                {this.state.blogPosts}
            </React.Fragment>

        )
    }
}

Есть ли способ добиться этого с помощью карты?Извините за мой вопрос новичка, все еще изучающий ReactJS.Большое спасибо заранее!

Answer 1

Сначала сгруппируйте элементы на основе row, где они будут размещены, затем выполните итерации по сгруппированным данным и отобразите 4 элемента в строке.Пожалуйста, рассмотрите следующие фрагменты кода

Создание групповых данных с использованием метода Reduce

componentDidMount() {
  ...
  .then(data => {
     var grouped = data.reduce((acc, post, ind) => {
       var index = parseInt(ind / 4);
       acc[index]= acc[index] || []; 
       acc[index].push(<Col > /*Column definition goes here*/ </Col>);
       return acc;
     }, {});
     this.setState({ grouped });
  });
}

После того, как у вас есть сгруппированные данные, вы можете отобразить их следующим образом

render() {
  const { grouped } = this.state;
  return (
    <React.Fragment>
      {
        Object.keys(grouped).map(row => {
          return (
            <Row>
            {
              grouped[row]
            }
            </Row>
          );
        })
      }
    </React.Fragment>
  );
}

Надеюсь, что этопоможет!