react JS中的分页

Question

我正在尝试在 React 中进行分页，但我遇到了一个我不太理解的错误。 我正在按照这些步骤https://codepen.io/PiotrBerebecki/pen/pEYPbY

class Reviews extends Component {
    state = { 
            currentPage: 1,
            reviewsPerPage: 2,
            reviews: []
         }

         componentDidMount() {
            this.getReviews();
        }

        getReviews() {
         fetch(`https://apiwe.herokuapp.com/reviews`)
             .then(response => response.json())
             .then(result => this.setState({ reviews: result }))
             .then(result => console.log(this.state.reviews))
             .catch(err => console.log(err));
     }


    handlePageChange = number => {
      this.setState({ currentPage: number });
    };

    render() { 
            const { currentPage, reviewsPerPage, reviews} = this.state

            console.log(this.state)
            const indexLastReview = currentPage * reviewsPerPage;
            const indexFirstReview = indexLastReview - reviewsPerPage;
            
           // HERE IS THE ERROR 

            const currentReviews = reviews.slice(indexFirstReview, indexLastReview);
            const renderReviews = currentReviews.map((review, index) => {
                return (
                    <li key={review.id}>
                        <figure>
                          <h3>
                              {review.review_name}
                          </h3>
                        </figure>
                      <p>
                          {review.review_text}
                      </p>
                    </li>
                )
            })
            
            const pageNumbers = [];
            for (let i = 1; i <= Math.ceil(reviews.length / reviewsPerPage); i++) {
                pageNumbers.push(i);
            }

            const renderPageNumbers = pageNumbers.map(number => {
                return (
                    <li
                        key={number}
                        id={number}
                        onClick={this.handlePageChange.bind(this)}
                    >
                        {number}
                    </li>
                );
            });

            return (
          <div>
            <ul>
              {renderReviews}
            </ul>
            <ul id="page-numbers">
              {renderPageNumbers}
            </ul>
          </div>
            )
    }
}
 
export default Reviews;

我得到的第一个错误是可以理解的：

TypeError: reviews.slice is not a function

那是因为我的评论不是数组，我需要获取我的数据，所以我尝试了：

let allReviews = reviews.reviews
console.log(allReviews)
const currentReviews = allReviews.slice......

现在，allReviews.slice 给我 undefined，我的 console.log(allReviews) 也是如此。

但我注意到，在更改我的 .slice 之前，所以：

let allReviews = reviews.reviews
console.log(allReviews)
const currentReviews = reviews.slice......

正如预期的那样，我得到了与第一个相同的错误，但我在allReviews 中获得了数据。我不知道如何解决这个问题，所以如果有人能帮我解决这个问题，我将不胜感激。

Answer 1

由于您的 fetch 是异步的，因此渲染代码会在您获得结果之前运行。这个是正常的。在 render 方法中你只需要检查 fetch 是否返回结果。如果 reviews.reviews 为 null 或未定义，您可以渲染一个空的 div。