我有一个页面,其中包含类别下拉菜单,一旦用户从下拉菜单中选择一个选项,便转到另一个页面。
但是有时有时只有1个类别,我想跳过下拉菜单,然后直接转到第二页。
但是我是通过ajax调用来获取类别的,所以在ComponentDidMount发生之前,我不知道会返回多少类别。
如果只有一种选择,那么我进行路由更改(在ComponentDidMount中),然后将其自动发送到第二页。
但是,这会导致ui上的闪烁(首先尝试呈现第一页,但是一旦安装了该代码,则进入下一页的代码就会被点击)。
我可以在另一个区域进行这种检查吗?
答案 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
)}
)
}