Question

我目前对获取标志和显示加载栏非常熟悉，并且能够成功触发带有获取标志的加载指示器。但是，我现在要实现的是仅在成功获取数据后才呈现新页面。在获取数据的同时，用户仍停留在前一页上，并显示一个加载栏。

获取数据时：停留在当前页面上（显示加载指示符）
对数据进行高科技处理：呈现新页面

因此，该网站上没有“正在加载”消息。

我的职责是在获取故事时显示故事并显示一些加载指示符：

export class Story extends Component {

     componentDidMount() {
    this.props.getStory();
  }
  
  render() {
    const { story, isFetching } = this.props.story;

    const isLoaded =  (
     
     story.title

    )

    const isLoading  = (

       <h3>Loading...</h3>
      )

    return (

  <Fragment>

        <h2>Stories</h2>

        {!isFetching?  <div> isLoaded</div>  : <div>isLoading </div>}

      </Fragment>

    );
  }
}

function mapStateToProps(state, ownProps) {
    const story = state.story
  return { story}
};

export default connect(
  mapStateToProps,
  { getStory}
)(Story);

但是，我对如何实现此逻辑感到迷logic，无法找到解决此问题的途径。例如，一个问题是将检查数据是否准备就绪的逻辑放在何处。在上一个组件中还是在要渲染的组件中？

我很高兴在这方面有任何提示。

如何仅在成功获取数据后才呈现下一个组件？

0 个答案: