Reactjs Can'；不要在子组件中安装道具

在我的app.js中，我正在使用firebase进行身份验证，并将用户保存在状态中，并将其作为道具发送到Home组件

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state={
            user:{}
        }
    }

    componentDidMount() {
        this.authListener();
    }

    authListener() {
        fire.auth().onAuthStateChanged((user) => {
            if(user) {
                this.setState({user});
            } else {
                this.setState({user:null});
            }
        })
    }
    render() {
        return (
            <div className="App">
                {this.state.user ? (<Home user={this.state.user} />) : (<Login />)}
            </div>
        )
    }
}

奇怪的是，如果我只console.log（this），我会得到整个对象，包括所有信息的用户

Home {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …}
context: {}
props: {user: Lk}
refs: {}
state: {error: null, registered: false}
updater: {isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
_reactInternalFiber: FiberNode {tag: 2, key: null, type: ƒ, stateNode: Home, return: FiberNode, …}
_reactInternalInstance: {_processChildContext: ƒ}
isMounted: (...)
replaceState: (...)
__proto__: Component

为什么我不能访问componentDidMount中的这个.props

---

谢谢大家!

之所以发生这种情况，是因为

组件didmount

最初是由一个空的

用户

（一个空对象）调用的。只有在验证检查后，才将其设置为

null

因此，

this.state.user

最初由于以下原因将计算为

true

this.state={
        user:{}
    }

如果您将初始状态设置为have

user:null

，它将起作用，因为

Home

组件仅在用户存在时才会装入

---

因此，流程是，

Home

组件装载一个空的

{}

用户

，运行

组件didmount

记录一个空的

用户

属性。然后，当您进行身份验证时，该组件不会运行

componentDidMount

，因为它已经挂载了，只会使用新的道具重新呈现。

由于官方文档

您可以在componentDidMount（）中立即调用setState（）。会的 触发额外的渲染，但它将在浏览器之前发生 更新屏幕。这保证了即使render（）将 在这种情况下被调用两次，用户将看不到中间层 状态请谨慎使用此模式，因为它通常会导致 性能问题。在大多数情况下，您应该能够分配 而不是构造函数（）中的初始状态。然而，它可以是 需要测量时，对于模态和工具提示之类的情况是必需的 呈现取决于其大小或属性的对象之前的DOM节点 位置

Home {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …}
context: {}
props: {user: Lk}
refs: {}
state: {error: null, registered: false}
updater: {isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
_reactInternalFiber: FiberNode {tag: 2, key: null, type: ƒ, stateNode: Home, return: FiberNode, …}
_reactInternalInstance: {_processChildContext: ƒ}
isMounted: (...)
replaceState: (...)
__proto__: Component

this.state={
        user:{}
    }