Javascript 反应js。铁路超高'；获取未定义的值，显示用户名称。我使用了道具来使用此文件中的用户状态，但它可以'；无法访问任何用户数据

当用户登录时，我无法显示用户数据，例如

name

。我使用了

props

和

state

user as

currentUser

，但我无法访问这些字段，因为错误表明它无法读取未定义的属性

class用户面板扩展了React.Component{
状态={user:this.props.currentUser}
下拉选项=（）=>[
{
密钥：“用户”，
正文：(
以{this.state.user.displayName}的身份登录
),
残疾人士：对
},
{
关键：“阿凡达”，
文本：更改化身
},
{
键：“注销”，
//设置注销功能，使用户可以注销聊天
text:this.handleSignOut（event）}>SignOut
}
];
handleSignOut=（事件）=>{
//您需要阻止表单提交。请在句柄提交函数中使用event.preventDefault（）。
event.preventDefault（）；
火基
.auth（）
.signOut（）
。然后（（）=>console.log（“再见”）；
} 
render（）{
console.log（this.props.currentUser）；
返回(
虚拟帽
{/*用户下拉选择*/}
)
}
}

//index.js
const store=createStore（rootReducer，composeWithDevTools（））；
//将根组件更改为状态完整组件
类根扩展了React.Component{
componentDidMount（）{
firebase.auth（）.onAuthStateChanged（用户=>{
//如果firebase已检测到用户
如果（用户）{
//console.log（用户）；
this.props.setUser（用户）；
//我们将把他们转到回家的路线
this.props.history.push（“/”）；
}否则{
//如果用户注销
this.props.history.push（'/login'）；
this.props.clearUser（）；
}
});
}
render（）{
是否返回此.props.isLoading？：(
//我们所有的单独路由都将嵌套在交换机组件中，交换机组件嵌套在路由器组件中
{/*应用程序的根路径，我们首先设置路径，然后设置要访问的组件*/}
{/*我们添加了exact关键字以确保主路由不会匹配多个组件*/}
{/*为登录和注册创建路由*/}
); 
}
} 
//从状态对象获取加载数据，以查看何时加载用户操作
const mapStateFromProps=state=>({
isLoading:state.user.isLoading
});
const RootWithAuth=withRouter(
连接(
//使用mapStateFromProps是因为，因为状态更新是异步的，并且需要一些时间
mapStateFromProps，
{setUser，clearUser}
)（根）
);
//我们呈现根目录，因为应用程序现在是我们的路线
//为了向其他组件提供这个全局状态/存储，我们将路由器包装到提供者中
//提供程序将向希望使用此全局状态的任何组件提供此全局状态
ReactDOM.render(
, 
document.getElementById（'root'））
);
registerServiceWorker（）

您调用

this.props.state.user

而不是

this.state.user

我认为该值是未定义的，因为您没有检查

props

是否有值可能您试图呈现的数据未准备好或是异步的。要处理此问题，您可以在

componentDidMount

中设置

状态

，因此如果

状态.currentUser

为

null

，则表示数据未准备就绪，您可以呈现加载程序或类似的内容

class UserPanel extends React.Component {

    state = { user: null }

    dropdownOptions = () => [
        {
            key: "user",
            text: (
                <span>
                    Sign in as <strong>{this.state.user.displayName}</strong>
                </span>
            ),
            disabled: true
        },
        {
            key: "avatar",
            text: <span>Change Avatar</span>
        },
        {
            key: "signout",
            // Set a signout Function to enable user to sign out of the chat
            text: <span onClick={event => this.handleSignOut(event)}>SignOut</span>
        }
    ];

    handleSignOut = (event) => {
        // You need to prevent form submission. Use event.preventDefault() in your handle submit function.
        event.preventDefault();
        firebase
            .auth()
            .signOut()
            .then(() => console.log("See you"));
    } 
    componentDidMount(){
     this.setState({ user: this.props.currentUser })
    }
    render(){
        if( !this.state.user){
          return <div>Curernt User doesnt exist!</div>
        }
        return (
            <Grid style={{ background: '#4c3c4c' }}>
                <Grid.Column>
                    <Grid.Row style={{ padding: '1.2rem', margin: 0 }}>
                        <Header inverted floated='left' as='h2'>
                            <Icon name='code' />
                            <Header.Content>VirtualChat</Header.Content>
                        </Header>
                    </Grid.Row>


                    {/* User Dropdown Choices */}
                    <Header style={{ padding: "0.25em" }} as="h4" inverted>
                        <Dropdown 
                        trigger={<span>{this.state.user.displayName}</span>}
                        options={this.dropdownOptions()}
                        />
                    </Header>
                </Grid.Column>
            </Grid>
        )
    }
}

class用户面板扩展了React.Component{
状态={user:null}
下拉选项=（）=>[
{
密钥：“用户”，
正文：(
以{this.state.user.displayName}的身份登录
),
残疾人士：对
},
{
关键：“阿凡达”，
文本：更改化身
},
{
键：“注销”，
//设置注销功能，使用户可以注销聊天
text:this.handleSignOut（event）}>SignOut
}
];
handleSignOut=（事件）=>{
//您需要阻止表单提交。请在句柄提交函数中使用event.preventDefault（）。
event.preventDefault（）；
火基
.auth（）
.signOut（）
。然后（（）=>console.log（“再见”）；
} 
componentDidMount（）{
this.setState（{user:this.props.currentUser}）
}
render（）{
如果（！this.state.user）{
返回当前用户不存在！
}
返回(
虚拟帽
{/*用户下拉选择*/}
)
}
}

我更新了有错误的图像，但仍然得到相同的结果。当您记录

this.props.currentUser时，console是否打印任何数据？它似乎无法访问数据可能是用户数据未准备好。但我还是
class UserPanel extends React.Component {

    state = { user: null }

    dropdownOptions = () => [
        {
            key: "user",
            text: (
                <span>
                    Sign in as <strong>{this.state.user.displayName}</strong>
                </span>
            ),
            disabled: true
        },
        {
            key: "avatar",
            text: <span>Change Avatar</span>
        },
        {
            key: "signout",
            // Set a signout Function to enable user to sign out of the chat
            text: <span onClick={event => this.handleSignOut(event)}>SignOut</span>
        }
    ];

    handleSignOut = (event) => {
        // You need to prevent form submission. Use event.preventDefault() in your handle submit function.
        event.preventDefault();
        firebase
            .auth()
            .signOut()
            .then(() => console.log("See you"));
    } 
    componentDidMount(){
     this.setState({ user: this.props.currentUser })
    }
    render(){
        if( !this.state.user){
          return <div>Curernt User doesnt exist!</div>
        }
        return (
            <Grid style={{ background: '#4c3c4c' }}>
                <Grid.Column>
                    <Grid.Row style={{ padding: '1.2rem', margin: 0 }}>
                        <Header inverted floated='left' as='h2'>
                            <Icon name='code' />
                            <Header.Content>VirtualChat</Header.Content>
                        </Header>
                    </Grid.Row>


                    {/* User Dropdown Choices */}
                    <Header style={{ padding: "0.25em" }} as="h4" inverted>
                        <Dropdown 
                        trigger={<span>{this.state.user.displayName}</span>}
                        options={this.dropdownOptions()}
                        />
                    </Header>
                </Grid.Column>
            </Grid>
        )
    }
}