React Component всегда возвращается к последнему элементу в массиве

Question

Это приложение React / Redux. У меня есть два компонента. Один вложен в другой.

<UserReview>
  <UserReviewItem>
</UserReview>

Я работаю с двумя API. Я вызываю один API для получения 'movieId', я использую 'movieId', чтобы вызвать второй API для получения изображения. Я сопоставляю массив, но кажется, что он возвращает только последний идентификатор элемента фильма.

Компонент упаковки:

    class UserReview extends Component {
      componentDidMount() {
        this.props.fetchAllReviews();
      }

      render() {
        const allReviews = this.props.reviews.slice(-2).map((review, i) => {
          return (
            <UserReviewItem
              username={review.username}
              text={review.text}
              key={review._id}
              movieId={review.movieId}
            />
          )
        });
const mapStateToProps = state => ({
  reviews: state.movies.reviews
})

Дочерний компонент:

    class UserReviewItem extends Component {
        componentDidMount() {
            **this.props.fetchImage(this.props.movieId)**
        }
        render() {
            return (
                <div key={this.props.key}>
                    <img
                        src={`https://image.tmdb.org/t/p/original/${this.props.img}`}
                    />
                    <div>
                        <h4>{this.props.username}</h4>
                        <p>{this.props.text}</p>
                    </div>
                </div>
            );
const mapStateToProps = state => ({
    img: state.movies.img
})

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

Решение, которое я пробовал, но получило тот же результат:

class UserReview extends Component {
  componentDidMount() {
    this.props.fetchAllReviews();
  }

  render() {
    const allReviews = this.props.reviews.slice(-2).map((review, i) => {
      return (
        <UserReviewItem
          username={review.username}
          text={review.text}
          key={review._id}
 -------> movieId={this.props.reviews[i].movieId} <--------
        />
      )
    });

const mapStateToProps = state => ({
  reviews: state.movies.reviews
})

Answer 1

Я нашел ответ. Поскольку второй вызов зависит от информации первого вызова, я должен объединить вызовы с помощью .then ()

, используя выборку внутри другой выборки в javascript

Answer 2

Вы можете попробовать так:

class UserReview extends Component {
      componentDidMount() {
        this.props.fetchAllReviews();
      }
      
      renderItems(){
      const { reviews } = this.props
      if (!reviews) return []
      return reviews.map(review => <UserReviewItem
              username={review.username}
              text={review.text}
              key={review._id}
              movieId={review.movieId}
            />)
      }

     

      render() {        
          return (          
            this.props.reviews
             ? <div>{this.renderItems()}</div>
             : <p>Loading...</p>
          )
        };

    const mapStateToProps = state => ({
      reviews: state.movies.reviews
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

В основном в функции renderItems вы деструктурируете реквизиты, получаете обзоры и сопоставляете их. В вашей функции рендеринга вы устанавливаете загрузчик, если представления еще не готовы (вы можете использовать подпорку загрузки, если вы настраиваете ее в своем магазине), или вызывать список, если обзоры уже получены и готовы.