Question

我有一个api，它将列出当前用户的所有访问权限，因此，一旦app.js加载，我就在componentWillMount中调用该api，因此基本上我有3条路由，即home，userslist和eachuser。因此主页是一个静态文本页面。

userslist是一个列出所有用户的组件，一旦单击用户的编辑图标，它将带您进入eachuser组件中的用户详细信息。

问题在于，一旦useraccessApi解析并通过传递useraccessApi响应仅获取我应调用usersListApi的数据，调用便是异步的。

快乐流程的意思是，第一个用户加载localhost：3000 / home，以便useraccessApi将调用并且redux具有数据，因此在切换到componenWillMount上的userslist选项卡时它将起作用。但是，如果用户直接选择localhost：3000 / userlist，则会在componenWillMount上引发错误，因此将代码移至componentWillRecieveProps（）。

那么我该如何解决此问题。还是应该使用mergeProps来解决它。

App.js


componenWillMount(){
 this.props.userAccessApi()
}


UsersList

componentWillMount(){
  const {currentUserAccess} = this.props
 // if its a happy flow else it will be currentUserAccess is undefined
 if(currentUserAccess){
   this.props.usersListApi(currentUserAccess)
 } 
}


// inorder to resolve it 

componentWillRecieveProps(nextProps){
  const {currentUserAccess} = nextProps
   if(currentUserAccess){
   this.props.usersListApi(currentUserAccess)
   } 
}


const mapStateToProps = (state) => {
  return {
    currentUserAccess: state.access
  } 
}

Answer 1

这是React Lifecycle事件的预期行为。

对于componentWillMount 该功能在组件首次渲染之前就被调用，因此乍一看似乎是放置数据获取逻辑的理想场所。

但是，这里有一个“陷阱”：在渲染发生之前，不会异步获取数据。这意味着组件将使用空数据至少渲染一次。这就是为什么您的调度功能失败并导致您未定义的原因。

相反，您应该使用ComponentDidMount作为获取数据的事件。

在调用componentDidMount时，该组件已被渲染一次。

实际上，componentDidMount是发出调用以获取数据的最佳位置。

使用它可以清楚地表明，只有在初始渲染之后才会加载数据。这提醒您正确设置初始状态，以免最终导致出现错误的未定义状态。

根据来自redux

1 个答案: