0

我正在映射评论 API 的数组，当我点击“阅读更多”时，我只想显示点击的评论，但目前正在扩展我的数组的所有评论，我正在使用打字稿，这对我来说都是新的所以我不知道如何移动，我应该如何将索引的信息传递给我的状态？

interface State {

  reviews: Review[];
  isReadMore: boolean;
}
export default class MoviePage extends Component<{}, State> {
  state: State = {
    reviews: [],
    isReadMore: false,
  };
  componentDidMount() {
    this.asyncAwaitFunc();
    this.toggle(arguments);
  }
      asyncAwaitFunc = async () => {
        try {
          
          const reviewmovie = await axios.get<ReviewResponse>(
            `https://api.themoviedb.org/3/movie/${this.props.match.params.id}/reviews?api_key=`
          );
          this.setState({
    
            reviews: reviewmovie.data.results,
          });
        } catch (error) {}
      };


  toggle(index: any) {
    this.setState({
      isReadMore: !this.state.isReadMore,
    });


    
      render() {
        const { isReadMore, reviews } = this.state;

    
    
        return (
          <>
            
            <ReviewGrid>
              {reviews.map((review, index) => (
               
                   <ReviewContent key={index}>
                    {this.state.isReadMore
                      ? review.content.substring(0, 650)
                      : review.content}

                    <Button onClick={() => this.toggle(index)}>
                      {isReadMore ? "...read more" : " show less"}
                    </Button>
                  </ReviewContent>
                   
              ))}
            </ReviewGrid>
          </>
        );
    
      }
    }
4

2 回答 2

1

我认为问题在于您保存 isReadMore 一次，但您需要为每次评论保存 isReadMore。这是一个例子：

interface ReviewRow {
  review: Review
  isReadMore: boolean
}
interface State {
  reviews: ReviewRow[]
}
export default class MoviePage extends Component<{}, State> {
  state: State = {
    reviews: []
  }

  componentDidMount() {
    this.asyncAwaitFunc()
  }

  asyncAwaitFunc = async () => {
    try {
      const reviewMovies = await axios.get<ReviewResponse>(
        `https://api.themoviedb.org/3/movie/${this.props.match.params.id}/reviews?api_key=`
      )
      this.setState({
        reviews: reviewMovies.data.results.map((review) => {
          return { review: review, isReadMore: false }
        })
      })
    } catch (error) {
      console.log(error)
    }
  }

  toggle(index: number) {
    const { reviews } = this.state
    reviews[index].isReadMore = !reviews[index].isReadMore
    this.setState({ reviews })
  }

  render() {
    const { reviews } = this.state
    return (
      <>
        <ReviewGrid>
          {reviews.map((reviewRow, index) => {
            ;<ReviewContent key={index}>
              { reviewRow.isReadMore ? reviewRow.review.content.substring(0, 650) : reviewRow.review..content}
              <Button onClick={() => this.toggle(index)}>{reviewRow.isReadMore ? '...read more' : ' show less'}</Button>
            </ReviewContent>
          })}
        </ReviewGrid>
      </>
    )
  }
}
于 2021-08-12T17:12:39.750 回答
0

由于我无法访问 API 或您正在使用的各种接口和组件，因此我对您的代码进行了一些修改以使其正常工作，但这应该会给您一个想法。您将跟踪isReadMore作为单个状态，这就是它为数组中的每个项目切换的原因。您需要单独跟踪每个评论的状态。这是几个可行的解决方案之一，但这里的想法是获取 API 的响应，并将其映射到一组新对象，其中包括您将添加的新键isReadMore，然后您可以单独切换此属性每次审查。

这是 CodeSandbox 上的工作示例。

编辑： 这是第二个示例的链接，它不需要您映射 api 调用的结果以添加新键来跟踪isReadMore状态。这种方法在 a 中单独跟踪状态Map<Review, boolean>。ES6 地图在这里工作得很好，因为您可以使用评论对象本身作为键，并且布尔值可以跟踪您的隐藏/显示状态。

原始解决方案

interface Review {
    title: string;
    content: string;
}

interface MyReview extends Review {
    isReadMore: boolean;
}

interface State {
    reviews: MyReview[];
}

export default class MoviePage extends React.Component<{}, State> {
    state: State = {
        reviews: []
    };

    componentDidMount() {
        this.asyncAwaitFunc();
    }

    asyncAwaitFunc = () => {
        try {
            const reviewsFromApi: Review[] = [
                {
                    title: "Some Movie",
                    content: "some movie review that's pretty long"
                },
                {
                    title: "Some Other Movie",
                    content: "an even longer super long movie review that's super long"
                }
            ];

            this.setState({
                reviews: reviewsFromApi.map((r) => ({ ...r, isReadMore: false }))
            });
        } catch (error) {
            console.log(error);
        }
    };

    toggle(index: number) {
        this.setState({
            reviews: this.state.reviews.map((r, i) => {
                if (i === index) {
                    return {
                        ...r,
                        isReadMore: !r.isReadMore
                    };
                }

                return r;
            })
        });
    }

    render() {
        const { reviews } = this.state;

        return (
            <>
                <div>
                    {reviews.map((review, index) => (
                        <div key={index}>
                            <p>
                                {review.isReadMore
                                    ? review.content.substring(0, 10) + "..."
                                    : review.content}
                            </p>

                            <button onClick={() => this.toggle(index)}>
                                {review.isReadMore ? "Read more" : " Show less"}
                            </button>
                        </div>
                    ))}
                </div>
            </>
        );
    }
}
于 2021-08-12T16:27:37.387 回答