ReactionJS добавить несколько карт подряд - PullRequest
Новая
       6

ReactionJS добавить несколько карт подряд

0 голосов
/ 17 мая 2018

Привет, я хотел бы знать, как добавить несколько карт подряд (например, 4 или 5).Сейчас у меня отображается только одна карта.

enter image description here

import React,{Component} from 'react';
import { Grid, Card, Icon, Image , Button} from 'semantic-ui-react'


export default class Class extends Component {

  constructor(props){
    super(props);
    this.state = {
      news:[],
    };
  }

componentDidMount() {

 const  url = 'https://newsapi.org/v2/top-headlines?country=us&apiKey=d5cf45043cd34b59b432df10e3cef274';


  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      this.setState({
        news: data.articles
      })
      console.log(data);
    })
    .catch((error)=>{
      console.log('error while trying to retrieve data')
    })
}

renderItems(){
  const src = 'https://placeimg.com/640/480/arch'
  return this.state.news.map((item) =>(
    <Card.Group>
      <Card
        image={src}
        header='Elliot Baker'
        meta='Friend'
        description='Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'
      />
    </Card.Group>

  ));
}


    render() {
        return (
          <Grid.Row>
            {this.renderItems()}
          </Grid.Row>
        );
    }
}

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Вместо рендеринга отдельных карт внутри группы, вы рендерите несколько групп, в которых есть только одна карта. Если вы обновите свой метод renderItems(), он будет работать. Используя метод карты Array, теперь у нас есть доступ ко всем данным для каждого элемента из вашего состояния в переменной с именем card: 

renderItems = () => {

  return (
    <Card.Group> 
      {this.state.news.map((card) => (
        <Card
          key={card.id} // Make sure you use a unique key identifier for React
          image={card.imageUrl} // This is the url of the image for the current object inside this.state.news.YOUR_CURRENT_OBJECT
          header={card.title}
          meta={card.type}
          description={card.description}
        />
      )}
    </Card.Group>
  )
}
0 голосов
/ 17 мая 2018

См .: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

renderItems(){
  return this.state.news.map((item) =>(
    <Card.Group>
      <Card
        image={item.urlToImage}
        header={item.author}
        meta={item.url}
        description={item.description}
      />
    </Card.Group>
  ));
}
...