Почему элемент абзаца не отображает состояние компонента при первой загрузке?

Question

Я ломал голову над этой проблемой последние 2-3 дня. Я пытаюсь показать набор displayName нового пользователя, сохраненный в базе данных аутентификации Firebase при загрузке страницы его учетной записи. Кажется, я не могу показать это при первой загрузке. Я попробовал установить метод setState в самом компоненте UserAccount, но это вызывает ту же проблему. Страница должна быть обновлена ​​вручную для изменения состояния имени пользователя и элемента p для отображения displayName на экране. Пожалуйста, помогите мне понять это. Вот код компонента UserAccount. Если вам нужны другие коды из других компонентов, пожалуйста, дайте мне знать.

class UserAccount extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            username: this.props.user.displayName

    }

    this.signout = this.signout.bind(this);

    }

    signout() {
        firebase.auth().signOut()
    }

   The following commented code is my first try to get the displayName to show but it had the same issue so I tried to pass the props from the App.js component to see if it would work but it again has the same issue:

 // componentDidMount () {

    //          firebase.auth().onAuthStateChanged((user) => {
    //          if (user) {
    //           var displayName = user.displayName;         
    //           console.log(displayName);
    //           this.setState((state) => {
    //             return {username: displayName} })
    //         } else {
    //           console.log('Please sig in')
    //         }
    //       })
    //         }


        render () {

        return (

                <div>

                <h1> You are in </h1>

                <button onClick={this.signout}>Sign Out</button>

                <p>Hey {this.state.username}</p>


                </div>


    )

    }

  }

Answer 1

В вашем коде вы используете значение props для инициализации состояния в конструкторе. Поскольку дочерний компонент уже визуализирован, изменение родительского реквизита не вызывает конструктор дочернего компонента. Вот почему это не меняет имя пользователя, и вам нужно принудительно запускать обновление, вызывая setState или forceUpdate. Вы можете скорее использовать getDerivedStateFromProps также, как упомянуто в ответе выше.

В противном случае, вы можете использовать реакционные хуки useState и useEffect , чтобы это исправить. Передавая реквизиты в качестве зависимости для useEffect, компонент будет отображаться каждый раз при изменении реквизита.

https://codesandbox.io/s/red-mountain-2zqbn?file= / src / App. js: 202-206

https://github.com/uberVU/react-guide/issues/17

Answer 2

убедитесь, что реквизиты имеют user.displayName, сохраните state.username == "" и попробуйте это:

  static getDerivedStateFromProps(props,state){
      if(props.user.displayName !== state.username){
          state['username'] = props.user.displayName
          return state;
      }
  return null;
}