Как дождаться обновления состояния, а затем отобразить или отобразить обновленное состояние в React Js?

#reactjs #react-redux

Вопрос:

Я работаю над проектом React Js и использую React Redux для входа в систему и загрузки пользователей. на странице входа в систему в случае успешного входа пользователь перенаправляется на домашнюю страницу. Я думаю, что загрузка пользователя занимает некоторое время, поэтому при первом перенаправлении на домашнюю страницу пользователь еще не загружен. но если я посещаю другую страницу, а затем возвращаюсь на домашнюю страницу, пользователь загружается.

Home.js

 class Home extends Component {  constructor(props) {  super(props);  this.state = {  unread:0,  }  }  componentDidMount() {  if(this.props.auth.user) (  console.log('hello)   }   render() {  return(  lt;divgt;  //some code here  lt;/divgt;  )}  }  const mapStateToProps = state =gt; ({  auth: state.auth });   export default connect(mapStateToProps, { })(Home);  

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

Как я могу распечатать это на консоли в первый раз?

Я использовал componentDidUpdate() вместо componentDidMount этого, работал, но он печатает привет на консоли непрерывно много раз. Но я хочу этого только один раз. как это возможно?

помогите, пожалуйста!

Комментарии:

1. добавьте код исправления, который обновляет state.auth и перенаправляет

Ответ №1:

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

 class Home extends Component {  constructor(props) {  super(props);  this.state = {  unread:0,  userCheckedOnce: false   }  }  componentDidMount() {  if(this.props.auth.user amp;amp; !this.state.userCheckedOnce) {  console.log('hello)  this.setState({unread: 0,userCheckedOnce: true})   }   render() {  return(  lt;divgt;  //some code here  lt;/divgt;  )}  }  const mapStateToProps = state =gt; ({  auth: state.auth });   export default connect(mapStateToProps, { })(Home);