Question

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

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

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

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

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

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

Answer 1

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

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 />
  }
}

Answer 2

您可以在渲染/重新路由之前添加加载状态/指示器。完成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
        )}
    )
}

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

2 个答案: