Передача данных на основе другого ответа API от Redux

Question

У меня есть API, в котором будет указан весь доступ, который имеет текущий пользователь, поэтому после загрузки app.js я вызываю API в componentWillMount, поэтому в основном у меня есть три маршрута: home, userslist, eachuser. Итак, дом - это статическая текстовая страница.

список пользователей - это компонент, в котором я перечисляю всех пользователей, после того, как вы нажмете на иконку редактирования пользователя, вы перейдете к деталям пользователя в каждом компоненте пользователя.

Проблема в том, что вызовы асинхронны после разрешения useraccessApi и получения только тех данных, которые я должен вызвать usersListApi, путем передачи ответа useraccessApi.

Что я имею в виду под «счастливым потоком», так это то, что первый пользователь загружает localhost: 3000 / home, поэтому useraccessApi будет вызывать, а в редуксе будут данные, поэтому при переключении на вкладку userlist на componentenWillMount это будет работать. Но если пользователь непосредственно выберет localhost: 3000 / userlist, он выдаст ошибку на componentenWillMount, поэтому переместил код в 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.

Для componentWillMount Эта функция вызывается непосредственно перед первым рендерингом компонента, поэтому на первый взгляд кажется, что это идеальное место для размещения логики выборки данных.

Но есть и «уловка»: асинхронный вызов для извлечения данных не вернется до того, как произойдет рендеринг. Это означает, что компонент будет отображаться с пустыми данными хотя бы один раз. Вот почему ваша функция отправки не работает, и вы получаете неопределенный.

Вместо этого вы должны использовать ComponentDidMount в качестве события, в котором вы будете получать данные.

К тому времени, когда вызывается componentDidMount, компонент визуализируется один раз.

На практике componentDidMount - это лучшее место для вызовов для извлечения данных.

С его помощью становится ясно, что данные не будут загружаться до окончания первоначального рендеринга. Это напоминает вам о правильной настройке начального состояния, поэтому вы не получите неопределенное состояние, которое вызывает ошибки.