Сопоставить объект состояния с массивом в качестве значений - PullRequest
Новая
       5

Сопоставить объект состояния с массивом в качестве значений

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

У нас есть следующее состояние в реакции: 

state = {
  thumbnail: [],
  title: [],
}

, которое устанавливается после того, как мы получаем некоторые данные из themoviedb API, например, 

axios.get(
    `http://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&with_genres=28,99&api_key=${apiKey}`
)
.then(res => {
    const thumbnail = res.data.results.map(res => res.poster_path)
    const title = res.data.results.map(res => res.original_title)

                this.setState({ thumbnail, title })
                // console.log(posterPath);
})

Таким образом, наше состояние будет выглядеть следующим образом: 

thumbnail: ['url1', 'url2'] // 20 entries
title: ['title1', 'title2'] // 20 entries, too

Затем я хочу отобразить список, который должен принять эти два реквизита в качестве значений и отобразить их, но я не знаю, как, то, что я пробовал: 

{Object.entries(this.state).map((url,i) => {
    console.log(url[1]);
    return(
        <ImageCard 
            key={i}
            source={{uri: 'http://image.tmdb.org/t/p/w342'+url.thumbnail}}
            style={{width: width * 0.3, height: height * 0.3, margin: 3}}
            title={url.title}
        />
    );
})}

Но это не работает, я хочу отобразить весь объект состояния. Так что мне не нужно делать две карты, у кого-то есть идеи, как я могу отобразить эту структуру данных?

Ответы [ 2 ]

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

Вы можете просто сделать следующее вместо 2 карт, если 2 массива будут одинаковой длины 

{this.state.title.map((title, i) => {
  return(
    <ImageCard 
        key={i}
        source={{uri: 'http://image.tmdb.org/t/p/w342'+this.state.thumbnail[i]}}
        style={{width: width * 0.3, height: height * 0.3, margin: 3}}
        title={title}
    />
  );
})}
1 голос
/ 26 октября 2019

Поскольку миниатюра и заголовок связаны друг с другом, я бы оставил в этом состоянии только один массив, например: 

state = {
  data: []
}

Переходя к axios.get, вот так: 

axios.get(
  `http://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&with_genres=28,99&api_key=${apiKey}`
)
  .then(res => {

    let temp = res.data.results.map(item => {
      return {
        thumbnail: item.poster_path,
        title: item.original_title
      }
    })

    this.setState({ data: temp })
  })

И отображение ImageCard так: 

this.state.data.map((item, index) => {
  return (
    <ImageCard
      key={index}
      source={{ uri: 'http://image.tmdb.org/t/p/w342' + item.thumbnail }}
      style={{ width: width * 0.3, height: height * 0.3, margin: 3 }}
      title={item.title}
    />
  );
})
...