reactjs - React 组件总是恢复到数组中的最后一项

问题描述

这是一个 React/Redux 应用程序。我有两个组件。一个嵌套在另一个中。

<UserReview>
  <UserReviewItem>
</UserReview>

我正在使用两个 API。我调用一个 API 来获取“movieId”，然后使用“movieId”调用第二个 API 来检索图像。我正在映射一个数组，但它似乎只返回最后一个元素的movieId。

包装组件：

    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
})

标签： reactjsreact-redux

reactjs - React 组件总是恢复到数组中的最后一项

问题描述

解决方案

推荐阅读