javascript - 不确定在哪里插入我的进度条组件以进行 api 调用

Question

• 我正在尝试学习材料ui
• 我得到了进度条。
• 但我需要加载直到我的数据没有加载。
• 不知道在哪里插入我的进度条组件。
• 你能告诉我如何在我调用 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>
    ) : (
      ""
    );
  }

标签： javascripthtmlreactjsreduxmaterial-ui

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

}