首页 > 解决方案 > this.state 中的额外未定义值

问题描述

我正在尝试在 reactjs 中发布一个表单,我怀疑它没有写入 DB,因为undefined我的状态很奇怪,看起来像:

表格看起来像这样

但在控制台中我得到:

这个

我前面的代码是:


    constructor(props) {
        super(props);
        this.state = { name: '', gender: '', email: '' };
    }

    handleChange= (event) => {
        this.setState({
          [event.target.name]: event.target.value,
          [event.target.gender]: event.target.value,
          [event.target.email]: event.target.value,
        //   [event.target.phone]: event.target.value,
        });
      }

    handleSubmit = (event) => {
        console.log(JSON.stringify(this.state));
        alert('A form was submitted: ' + this.state);
        fetch('http://localhost:3000/api/game/contacts', {
            method: 'POST',
            body: JSON.stringify(this.state)
          }).then(function(response) {
            return response.json();
          });
    
        event.preventDefault();
    }

    render() {

        const { user } = this.props.auth;
        console.log(this.state);
        return(
            <div>
                
                <form onSubmit={this.handleSubmit}>
                    <label>
                    Name:</label>
                    <input type="text" value={this.state.value} name="name" onChange={this.handleChange} />
                    
                    <label>
                    Gender:</label>
                    <input type="text" value={this.state.value} name="gender" onChange={this.handleChange} />
                    
                    <label>
                    Email:</label>
                    <input type="text" value={this.state.value} name="email" onChange={this.handleChange} />
                    
                    <input type="submit" value="Submit" />
                </form>

            </div>
            
        );
    }
}

Dashboard.propTypes = {
    auth: PropTypes.object.isRequired
};

const mapStateToProps = ( state ) => ({
    auth: state.auth
});

export default connect( mapStateToProps  )( Dashboard ); 

必须超级简单,但我用谷歌搜索了 2 个小时,但看不到问题。谢谢你的时间

标签: reactjs

解决方案


推荐阅读