为什么段落元素在首次加载时不呈现组件的状态？答案

【问题标题】：Why is the paragraph element not rendering the component's state on first load?为什么段落元素在首次加载时不呈现组件的状态？
【发布时间】：2020-04-19 09:45:07
【问题描述】：

在过去的 2-3 天里，我一直在为这个问题头疼。我正在尝试在加载新用户的帐户页面时显示新用户的 displayName 集并存储在 Firebase 身份验证数据库中。我似乎无法在第一次加载时显示它。我在 UserAccount 组件本身中尝试了 setState 方法，但它导致了同样的问题。需要手动刷新页面才能更改用户名状态以及 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>


    )

    }

  }

【问题讨论】：

标签： reactjs firebase authentication

【解决方案1】：

在您的代码中，您使用道具值来初始化构造函数中的状态。由于子组件已经渲染，更改父属性不会调用子组件的构造函数。这就是为什么它不会更改用户名并且您需要通过调用 setState 或 forceUpdate 来强制触发更新。您也可以像上面的答案中提到的那样使用 getDerivedStateFromProps。

否则，您可以使用反应钩子 useState 和 useEffect 来解决此问题。通过将 props 作为 useEffect 的依赖项传递，每次 prop 更改时都会渲染组件。

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

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

【讨论】：

您好 Vivekanand，感谢您的帮助。不幸的是，您的代码对我不起作用。不确定是否是 Firebase 有所作为。我将向所有代码发送一个 GitHub 链接，包括来自 UserAccount 组件的 app.js 组件，很快就会提供。希望有另一种解决方案。顺便说一句，Ishaan 建议的代码也不起作用。我束手无策。谢谢。
您好，这里是 GitHub 上完整代码的链接 - github.com/DYT5131/dyt。我也在那里创建了一个问题。请告诉我。谢谢。
您好，建议不要在 UserAccount 组件中使用 state，而是尝试在
标签中显示 props 值。因此，我们可以确定问题出在父组件还是子组件中。 <p>Hey {this.props.user.displayName}</p>
嗨，Vivekanand，不幸的是，它也不起作用。但是，当我登录时，第一次加载时会显示 displayName，但在我注册时不会显示。嗯....还在想....

【解决方案2】：

确保道具有 user.displayName，保持 state.username == "" 并试试这个：

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

【讨论】：

嗨，Ishaan，非常感谢您的帮助。有趣的是，就在我在这里登录之前，我访问了 react 的官方网站并阅读了静态 getDerivedStateFromProps 方法并打算尝试一下。但是，它们似乎也阻止了读者使用它。在首次加载时使用道具在 UI 中显示用户的 displayName 的替代方法是什么？谢谢！
嗨，Ishaan，很遗憾，您建议的方法不起作用。由于某种原因，UseEffects 也不起作用。我想知道提供 UserAccount 的 App.js 是否有问题。这是 GitHub 上完整代码的链接 - github.com/DYT5131/dyt。请让我知道你在想什么。谢谢。