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

Question

• Я пытаюсь выучить материал.
• Я получил индикатор выполнения.
• , но мне нужно загружать, пока не загрузятся мои данные.
• нетЯ уверен, куда вставить мой индикатор выполнения.
• Можете ли вы сказать мне, как это исправить, пока я выполняю вызов API. Так что в будущем я сам исправлю это
• , предоставив мой фрагмент кода ниже..
• весь мой код находится в ReceipeReviewCardList.js

https://codesandbox.io/s/04r2qwv5jv

  getPlayerValues() {
    let comments = [];
    fetch("https://jsonplaceholder.typicode.com/comments")
      .then(response => response.json())
      .then(json => {
        comments = json;
        // comments = comments.slice(0,3);
        this.setState({ comments: comments });
        this.setState({ activeComments: comments.slice(0, 10) });
        //console.log(comments);
      });
  }

  render() {
    let listView = this.state.activeComments.map(comment => (
      <RecipeReviewCard
        key={comment.id}
        commentId={comment.id}
        cardBelowContent={comment.body}
        cardContent={comment.name}
        comment={comment}
      />
    ));
    return this.state.comments.length > 0 ? (
      <div>
        <LinearDeterminate />
        {listView}
        <br />

        <Pagination
          activePage={this.state.activePage}
          itemsCountPerPage={10}
          totalItemsCount={this.state.comments.length}
          pageRangeDisplayed={5}
          onChange={this.handlePageChange}
        />
      </div>
    ) : (
      ""
    );
  }

Answer 1

Лучше всего использовать флаг loading, который устанавливается на true непосредственно перед началом запроса, а затем на false, когда запрос возвращается.Затем вы можете использовать этот флаг для условного рендеринга вашего индикатора выполнения!

getPlayerValues() {
  this.setState({ loading: true });
  fetch("https://jsonplaceholder.typicode.com/comments")
    .then(response => response.json())
    .then(comments => {
       this.setState({
         loading: false,
         comments: comments
       });
   });
}


render() {
  const { comments, loading } = this.state

  // active comments can be derived so no need to store them in state :)
  const activeComments = comments.slice(0, 10);

  // render your progress bar
  if(loading) return <LinearDeterminate />;

  // render everything else once loading === false
  return (
    <div>
      {activeComments.map(comment => (
        <RecipeReviewCard
          key={comment.id}
          comment={comment}               {/* already passing comment prop here */}
          commentId={comment.id}          {/* so there's need to pass the these props */}
          cardContent={comment.name}      {/* just access via this.props.comment */}
          cardBelowContent={comment.body} 
        />
      ))}
    </div>
  )

}