为什么 this.state 会出现错误 "Unexpected token"？

Question

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

代码 returns 一个错误，提示意外令牌 (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 = '',
            middleName = '',
            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='firstname.lastname@domain.com'/>
                            </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 数据库中提交。

Answer 1

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

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

Answer 2

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

this.state = { firstName: "" }

为什么 this.state 会出现错误 "Unexpected token"？

Why do I get the error "Unexpected token" for this.state?

javascript

reactjs

react-props

react-state