无法获取未定义的值，用户的显示名称。我已经使用 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 {&nbsp; &nbsp; state = { user: null }&nbsp; &nbsp; dropdownOptions = () => [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key: "user",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Sign in as <strong>{this.state.user.displayName}</strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; disabled: true&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key: "avatar",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: <span>Change Avatar</span>&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key: "signout",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Set a signout Function to enable user to sign out of the chat&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: <span onClick={event => this.handleSignOut(event)}>SignOut</span>&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ];&nbsp; &nbsp; handleSignOut = (event) => {&nbsp; &nbsp; &nbsp; &nbsp; // You need to prevent form submission. Use event.preventDefault() in your handle submit function.&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; firebase&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .auth()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .signOut()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(() => console.log("See you"));&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; componentDidMount(){&nbsp; &nbsp; &nbsp;this.setState({ user: this.props.currentUser })&nbsp; &nbsp; }&nbsp; &nbsp; render(){&nbsp; &nbsp; &nbsp; &nbsp; if( !this.state.user){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <div>Curernt User doesnt exist!</div>&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid style={{ background: '#4c3c4c' }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid.Column>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid.Row style={{ padding: '1.2rem', margin: 0 }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Header inverted floated='left' as='h2'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Icon name='code' />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Header.Content>VirtualChat</Header.Content>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Header>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid.Row>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {/* User Dropdown Choices */}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Header style={{ padding: "0.25em" }} as="h4" inverted>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Dropdown&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trigger={<span>{this.state.user.displayName}</span>}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options={this.dropdownOptions()}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Header>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid.Column>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}

Answer 2

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