Консоль говорит, что не может найти поле данных пользователя, не может найти пользователя с неопределенным - PullRequest
Новая
       54

Консоль говорит, что не может найти поле данных пользователя, не может найти пользователя с неопределенным

0 голосов
/ 07 октября 2019

Я хочу отобразить имя зарегистрированного пользователя в левой части страницы. Когда я пытаюсь связаться с пользователем displayName, он говорит, что не может найти значение undefined. Может кто-нибудь объяснить мне, почему?

Я пробовал componentDidMount и некоторые другие методы, но кажется, что во время рендеринга здесь что-то не так 

componentDidMount() {
        firebase.auth().onAuthStateChanged(user => {
            // If firebase has detect a user
            if (user) {
                this.props.setUser(user);
                this.props.history.push("/");

Вот файл 

class UserPanel extends React.Component {

    state = {
        user: null
    }


    componentDidMount(){
        this.setState({ user: this.props.currentUser })
    }



    dropdownOptions = () => [
        {
            key: "user",
            text: (
                <span>
                    Sign in as <strong>{this.state.user && 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);

// !this.state.currentUser ? <Spinner /> :
        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>
        )
    }
}


const mapStateToProps = state => ({
    currentUser: state.user.currentUser
})


export default connect(mapStateToProps)(UserPanel);

1 Ответ

1 голос
/ 07 октября 2019

В вашем коде this.state.user не является истинным значением до componentDidMount(), что не вступает в силу до первого рендера. Во время начального рендеринга вы пытаетесь получить доступ к значению в объекте, который еще не существует.

Что вы можете сделать, это реализовать условие, чтобы проверить, действительно ли this.state.user, иначе вывести пустую строку,Скорость повторного рендеринга компонента очень высокая, поэтому вы даже не заметите пустую строку при первом рендеринге. 

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