在哪里调用将在渲染之前发生的Ajax请求?

时间:2018-12-20 17:51:56

标签: reactjs

我有一个页面,其中包含类别下拉菜单,一旦用户从下拉菜单中选择一个选项,便转到另一个页面。

但是有时有时只有1个类别,我想跳过下拉菜单,然后直接转到第二页。

但是我是通过ajax调用来获取类别的,所以在ComponentDidMount发生之前,我不知道会返回多少类别。

如果只有一种选择,那么我进行路由更改(在ComponentDidMount中),然后将其自动发送到第二页。

但是,这会导致ui上的闪烁(首先尝试呈现第一页,但是一旦安装了该代码,则进入下一页的代码就会被点击)。

我可以在另一个区域进行这种检查吗?

2 个答案:

答案 0 :(得分:0)

从服务器获取结果时仅显示加载程序怎么样?这样用户就不会在屏幕上看到任何闪烁。

componentDidMount() {
  fetchCategories().then((categories) => {
     if (categories.length === 1) {
       // Redirect
     }
     else {
       this.setState({ categories })
     }
  })
}

render() {
  if (!this.state.categories) {
      // Show loader while categories are being fetched.
      return <Loader />
  }
  else if(this.state.categories.length > 1) {
     // Show content if categories are more
     return <Categories />
  }
}

答案 1 :(得分:0)

您可以在渲染/重新路由之前添加加载状态/指示器。 完成ajax调用后,设置加载状态/ prop,然后将呈现下拉菜单或页面重新路由而不会闪烁。

没有redux /全局状态管理的示例

//****************************************************************************/

constructor(props) {

    super(props)

    this.state = {
        categoriesLoaded: false
    }
}

//****************************************************************************/

componentDidMount() {

    this.props.fetchCategories().then(response => {

        this.setState({ categoriesLoaded: true })

    }).catch(e => {

        ...handle
    })
}

//****************************************************************************/

render() {

    return (
        {this.state.categoriesLoaded && (

            handle list display or reroute
        )}
    )
}