Нужно вывести на страницу несколько элементов из одного массива React

Question

Я с помощью метода fetch отправляю запрос, получаю ответ, обрабатываю его и у меня остается массив объектов, в котором хранится информация по фильмам. Все эти фильмы мне нужно вывести на страницу в виде карточки. Вот мой код:

export default class CardMovie extends Component {

    state = {
        image: null,
        originalTitle: null,
        date: null,
        genres: null,
        overview: null,
    }

    async componentDidMount() {
        await fetch('https://api.themoviedb.org/3/search/movie?api_key=b14771c0adfdc54f59204d41d5bf2302&query=return')
          .then(resp => resp.json())
          .then(rez => rez.results[0])
          .then(elem => {
                this.setState({
                    image: `https://image.tmdb.org/t/p/w500${elem.poster_path}`,
                    originalTitle: elem.original_title,
                    date: format(new Date(elem.release_date), 'PP'),
                    genres: 'genres',
                    overview: this.shortText(elem.overview, 210, '...'),
                })
            
          })
    }
    
    shortText(longText, maxLength, postfix) {
    const pos = longText.indexOf(" ", maxLength);
    return (pos === -1 ? longText : longText.substr(0, pos) + postfix);
    }

    newCard() {

        const { image, originalTitle, date, overview, genres } = this.state;
        const { Title, Text } = Typography;

        return (
            <Row className='cardStyle'>
                <Col className='gutter-row' span={12}>
                    <Image
                        src={image}
                    />
                </Col>
                <Col className='gutter-row' span={1} />
                <Col className='gutter-row' span={10}>
                    <Title level={5}>{originalTitle}</Title>
                    <Text disabled>{date}</Text> <br />
                    <Text keyboard type="secondary">{genres}</Text>
                    <Text>
                        <p className='overview'>{overview}</p>
                    </Text>
                    <Col className='gutter-row' span={1} />
                </Col>
            </Row>
        )
    }

    render() {
        return (
            <div>
                { this.newCard() }  
            </div>          
        )
    }
}

Код рабочий, ошибок нет. Но на страницу рендерится только последний фильм, сколько бы карточек я не отображала

Подскажите, пожалуйста, в чем ошибка?

Answer 1

Вы передаете в state только первый фильм .then(rez => rez.results[0]) вы можете передать все, и в рендере к массиву применить .map и на каждой итерации делать рендер карточки фильма, соответственно передавая параметры для рендера через аргументы. Как тут:

newCard(movie) {
    const { image, originalTitle, date, overview, genres } = movie;
    ...код
}

Ну и весь код

class CardMovie extends React.Component {
  state = {
    movies: []
  };

  async componentDidMount() {
     await fetch("https://api.themoviedb.org/3/search/movie?api_key=b14771c0adfdc54f59204d41d5bf2302&query=return"
)
          .then((resp) => resp.json())
          .then((rez) => this.setState({ movies: rez.results }));
  }

  shortText(longText, maxLength, postfix) {
     const pos = longText.indexOf(" ", maxLength);
     return pos === -1 ? longText : longText.substr(0, pos) + postfix;
  }

  newCard(movie) {
    const { image, originalTitle, date, overview, genres } = movie;
    const { Title, Text } = Typography;

    return (
      <Row className="cardStyle">
        <Col className="gutter-row" span={12}>
          <Image src={image} />
        </Col>
        <Col className="gutter-row" span={1} />
        <Col className="gutter-row" span={10}>
          <Title level={5}>{originalTitle}</Title>
          <Text disabled>{date}</Text> <br />
          <Text keyboard type="secondary">
            {genres}
          </Text>
          <Text>
           <p className="overview">{overview}</p>
          </Text>
          <Col className="gutter-row" span={1} />
        </Col>
      </Row>
     );
  }

  render() {
    const {movies} = this.state;
    return (
      <div>
        {movies.map(movie => (
            this.newCard(movie)
        ))}
      </div>
    )
  }
}

БЛОГ НА HUSL

Нужно вывести на страницу несколько элементов из одного массива React

Ответы (1 шт):