console.log this.state 沒有在反應中顯示當前狀態

Question

我是新來的反應和玩弄注冊表單。 我的渲染方法總是顯示user.name 、 user.email的當前狀態，並且error屬性總是被適當地標記。

但是，在我的綁定方法（ considerSubmit提交、 validateEmail電子郵件等）中， console.log(this.state)輸出我的默認狀態，而不是當前狀態。

我在這里想念什么？ 我認為.bind(this)會在所有方法之間同步狀態。

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {withStyles, createStyleSheet} from 'material-ui/styles';
import TextField from 'material-ui/TextField';
import Button from 'material-ui/Button';
import Dialog, {
    DialogActions,
    DialogContent,
    DialogContentText,
    DialogTitle,
} from 'material-ui/Dialog';
import Slide from 'material-ui/transitions/Slide';

const popsicle = require('popsicle');
const styleSheet = createStyleSheet('RegistrationProgress', {
    root: {
        maxWidth: 400,
        flexGrow: 1,
    },
});

class RegistrationProgress extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user: {
                name: null,
                isNameValid: null,
                email: null,
                isEmailValid: null
            },
            notice: {
                title: null,
                message: null,
                open: false,
            }
        };
    }

    handleRequestClose() {
        let noticeState = this.state.notice;
        noticeState.open = false;
        this.setState({notice: noticeState});
    };

    considerSubmit(event) {
        const isSubmitAction = event.key === 'Enter' || event.type === 'click';
        if (isSubmitAction) {
            let userState = this.state.user;
            let formReady = (userState.isNameValid && userState.isEmailValid);
            if (!formReady) {
                this.showNotice("Hold on a sec!", "Make sure your first and last name is provided as well as a proper email address.");
                return;
            }
            var RegistrationProgress = this;
            var element = document.querySelector('meta[name="csrf-token"]');
            var csrf_token = element && element.getAttribute("content");
            console.log(userState, userState.name,this.state.user)
            popsicle.request({
                method: 'POST',
                url: '/register',
                body: {
                    name: userState.name,
                    email: userState.email,
                    _token: csrf_token
                },
                headers: {
                    'X-XSRF-TOKEN': csrf_token
                }
            })
                .use(popsicle.plugins.parse('json'))
                .then(function (res) {
                    console.log(res.status) // => 200
                    console.log(res.body) //=> { ... }
                    console.log(res.get('Content-Type')) //=> 'application/json'
                    RegistrationProgress.showNotice("Yeehaw!", "Account created! Confirm your email to login.");
                })
                .catch(function(error){
                    RegistrationProgress.showNotice("Uh-oh.", "Looks like our server hiccuped when handling your request. Try again.")
                });
        }
        return event;
    }

    showNotice(title = "Whoa!", message) {
        this.setState({
            notice: {
                title: title,
                message: message,
                open: true
            }
        })
    }

    validateName(event) {
        const nameRule = /^(([A-Za-z]+[\-\']?)*([A-Za-z]+)?\s)+([A-Za-z]+[\-\']?)*([A-Za-z]+)?$/;
        let registerName = (event.target.value).trim();
        let userState = this.state.user;
        userState.isNameValid = nameRule.test(registerName);
        console.log(userState)
        this.setState({user: userState})
    }

    validateEmail(event) {
        const emailRule = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;
        let registerEmail = (event.target.value).trim();
        let userState = this.state.user;
        userState.isEmailValid = emailRule.test(registerEmail);
        this.setState({
            user: userState
        })
    }

    render() {
        const classes = this.props.classes;
        return (
            <div className="register-form" onKeyPress={this.considerSubmit.bind(this)}>
                <TextField id="name" name="name" label="Full Name" type="text" defaultValue={this.state.user.name}
                           className={classes.input}
                           error={RegistrationProgress.getErrorState(this.state.user.isNameValid)}
                           helperText="" onChange={(event) => this.validateName(event)} marginForm
                />
                <br/>
                <TextField id="email" name="email" label="Email" type="email" defaultValue={this.state.user.email}
                           className={classes.input}
                           error={RegistrationProgress.getErrorState(this.state.user.isEmailValid)}
                           helperText="" onChange={(event) => this.validateEmail(event)} marginForm
                />
                <br />
                <Button raised color="primary" className={'register-button ' + classes.button}
                        onClick={(event) => this.considerSubmit(event)}>
                    Sign Up
                </Button>
                <Dialog open={this.state.notice.open} transition={Slide}
                        onRequestClose={this.handleRequestClose.bind(this)}>
                    <DialogTitle>
                        {this.state.notice.title}
                    </DialogTitle>
                    <DialogContent>
                        <DialogContentText>
                            {this.state.notice.message}
                        </DialogContentText>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={this.handleRequestClose.bind(this)} color="primary">
                            Got it!
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        );
    }

    static getErrorState(value) {
        return (!value && value !== null);
    }
}

RegistrationProgress.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styleSheet)(RegistrationProgress);

Answer 1

您的組件處理程序只是將“this”綁定到處理程序方法，而不是調用它們。

您可以在構造函數中綁定“this”，或者將處理程序函數設為“胖箭頭”函數（然后自動綁定 this）。 然后，確保在組件中正確設置處理程序：

構造函數：

constructor(props) {
    super(props);
    this.state = {
        user: {
            name: null,
            isNameValid: null,
            email: null,
            isEmailValid: null
        },
        notice: {
            title: null,
            message: null,
            open: false,
        }
    };
    this.considerSubmit.bind(this);
    this.handleRequestClose.bind(this);
    this.handleRequestClose.bind(this);
}

使成為：

render() {
    const classes = this.props.classes;
    return (
        <div className="register-form" onKeyPress={this.considerSubmit()}>
            <TextField id="name" name="name" label="Full Name" type="text" defaultValue={this.state.user.name}
                       className={classes.input}
                       error={RegistrationProgress.getErrorState(this.state.user.isNameValid)}
                       helperText="" onChange={(event) => this.validateName(event)} marginForm
            />
            <br/>
            <TextField id="email" name="email" label="Email" type="email" defaultValue={this.state.user.email}
                       className={classes.input}
                       error={RegistrationProgress.getErrorState(this.state.user.isEmailValid)}
                       helperText="" onChange={(event) => this.validateEmail(event)} marginForm
            />
            <br />
            <Button raised color="primary" className={'register-button ' + classes.button}
                    onClick={(event) => this.considerSubmit(event)}>
                Sign Up
            </Button>
            <Dialog open={this.state.notice.open} transition={Slide}
                    onRequestClose={this.handleRequestClose()}>
                <DialogTitle>
                    {this.state.notice.title}
                </DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        {this.state.notice.message}
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={this.handleRequestClose())} color="primary">
                        Got it!
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}