无法获取未定义的值，用户的显示名称。我已经使用 props 来使用此文件中的用户状态

Question

我无法显示用户数据，例如name他登录时的数据。我使用过props和stateuser ascurrentUser但我无法访问这些字段，因为错误说它无法读取未定义的属性。class UserPanel extends React.Component {    state = { user: this.props.currentUser }    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"));    }     render(){        console.log(this.props.currentUser);        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>        )    }}

Answer 1

我认为该值是未定义的，因为您没有检查它是否props具有值，也许您尝试呈现的数据尚未准备好或为async。为了解决这个问题，你可以设置你state的componentDidMount所以如果state.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>

        )

    }

}

Answer 2

你打电话this.props.state.user而不是this.state.user