为什么我会收到 this.state 的错误“Unexpected token”？

问题描述

我正在尝试制作登录表单并学习 React。我的一切都基于 React 的官方文档。然而，当我尝试做我的事情并添加新的用户输入时，它不会编译。

代码返回一个错误，指出意外令牌 (9:22)： （带有箭头的标记）

       7 |         super(props)
       8 |         this.state = {
    >  9 |             firstName = '',|                       ^
      10 |             middleName = '',11 |             firstName = '',12 |             middleName = '',

代码：

import React from 'react';
import './Signup.css';

class Userform extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            firstName = '',middleName = '',firstName = '',lastName = '',birthdate = '',address = '',contactNumber = '',email = '',year = '',department = ''
        };

        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleInputChange(event) {
            const target = event.target;
            const value = target.type === 'checkBox' ? target.checked : target.value;
            const name = target.name;

            this.setState({
                [name]: value
            });
        }
  
    handleSubmit(event) {
        alert('A new enty has been submitted: ' + this.state.value);
        event.preventDefault();
    }
  
    render() {
        return (
            <div className="user-form">
                <div className="main-wrapper">
                    <div className = 'signup-banner'>
                        <h1>Registration Form</h1>
                    </div>

                    <form onSubmit={this.handleSubmit}>
                        <div className="info-wrapper">
                            <label>
                                First Name:
                                <input type="text" name='firstName'  id="user-input" onChange={this.handleInputChange} autoComplete="off" />
                            </label>
                        </div>

                        <div className="info-wrapper">
                            <label>
                                Middle Name:
                                <input type="text" name='middleName'  id="user-input" onChange={this.handleInputChange} autocomplete="off"/>
                            </label>
                        </div>
                        
                        <div className="info-wrapper">
                            <label>
                                Last Name:
                                <input type="text" name='lastName' id="user-input" onChange={this.handleInputChange} autocomplete="off" />
                            </label>
                        </div>
                        
                        <div className="info-wrapper">
                            <label>
                                Birthdate:
                                <input type="text"  name="birthDate" id="user-input" onChange={this.handleInputChange} autocomplete="off"/>
                            </label>
                        </div>
                        
                        <div className="info-wrapper">
                            <label>
                                Address:
                                <input type="text" name='address'  id="user-input" onChange={this.handleInputChange} autocomplete="off"/>
                            </label>
                        </div>
                        
                        <div className="info-wrapper">
                            <label>
                                Email:
                                <input type="text" name ='email' id="user-input" onChange={this.handleInputChange} autocomplete="off" placeholder='[e-mail]'/>
                            </label>
                        </div>
                        
                        <div className="info-wrapper">
                            <label>
                                Contact Number:
                                <input type="number" name="contactNumber"  id="user-input" onChange={this.handleInputChange} autocomplete="off"/>
                            </label>
                        </div> 
                            
                        <div className="info-wrapper">
                            <label>
                                Year:
                                <input type="text" name="year"  id="user-input" onChange={this.handleInputChange} autocomplete="off"/>
                            </label>
                        </div>
                        
                        <div className="info-wrapper">
                            <label>
                                Department:
                                <input type="text" name="department" id="user-input" onChange={this.handleInputChange} autocomplete="off"/>
                            </label>
                        </div>
                        
                        <div className="info-wrapper">
                            <input type="checkBox" id='agree-Box' onChange={this.handleInputChange} />
                            <p>Agree to Terms and Conditions</p>
                        </div>
                        
                        <input type="submit" value="Submit" id="submit-button" />
                    </form>
                </div>
            </div>
        );
    }
}
      
export default Userform;

我对 React 真的很陌生，我现在没有人要问。登录表单应使用节点在 MysqL 数据库中提交。

解决方法

       this.state = {
            firstName: '',middleName: '',firstName: '',lastName: '',birthdate: '',address: '',contactNumber: '',email: '',year: '',department: ''
            };

你的状态是一个对象，应该这样写

,

这是声明对象的拼写错误。正确的做法是

this.state = { firstName: "" }