React类组件语法错误：let jsonLang处出现Unexpected token求助

这个错误的根源很明确：你违反了ES6类的语法规则——类的主体（constructor和render之间的区域）只能定义方法、类字段或者构造函数，不能直接写let、if这类可执行代码逻辑，JavaScript解析器在类的上下文中遇到这些语句时，就会抛出「Unexpected token」错误。

具体修正步骤 #

我会给你两种可行的修正方案，你可以根据代码整洁度需求选择：

方案1：将逻辑移到render方法内部

把原本放在constructor和render之间的变量声明、条件判断全部移入render方法里，同时修复事件处理函数的this绑定问题：

import { Component } from 'react';
// 记得导入你用到的Form、FormGroup、Col、Input、Button、Link等组件
// import { Form, FormGroup, Col, Input, Button, Link } from 'reactstrap'; // 假设你用的是reactstrap

export default class NewFormDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      validated: false,
      language: 'en',
      siteName: null,
      counties: null,
      siteAddress: null,
      siteEmail: null,
      siteNumber: null,
      siteCat: null,
      openTimes: null,
      fees: null,
      access: null,
      gps: null,
      w3w: null,
      textHeader: null,
      textContent: null
    };
  }

  // 用箭头函数作为类字段，自动绑定this到组件实例
  handleChange = (e) => {
    this.setState({ 
      ...this.state, 
      [e.target.name]: e.target.value 
    });
  }

  handleSubmit = () => {
    console.log(this.state);
  }

  render() {
    // 把原本的逻辑移到这里
    let jsonLang;
    if (this.state.language === 'en') {
      jsonLang = data.en;
    } else if (this.state.language === 'es') {
      jsonLang = data.es;
    } else {
      jsonLang = data.en;
    }
    const placeholders = jsonLang.placeholders;
    const counties = jsonLang.counties;

    return (
      <Form onSubmit={this.handleSubmit} className="form">
        {/* General Information */}
        <FormGroup row>
          <Col sm={6}>
            <Input 
              type="text" 
              onChange={this.handleChange} 
              name="siteName" 
              id="siteName" 
              placeholder={placeholders.siteName}
            />
          </Col>
          <Col sm={6}>
            <Input 
              className="form-control" 
              type="select" 
              id="counties" 
              onChange={this.handleChange}
              name="counties" {/* 补充name属性，否则无法更新state中的counties字段 */}
            >
              <option className="selectDefault" disabled value={placeholders.siteCounties} selected>{placeholders.siteCounty}</option>
              { counties.map(c => (<option key={c.value} value={c.value}>{c.display}</option>))}
            </Input>
          </Col>
        </FormGroup>
        {/* 以下保留你原有的其他表单代码 */}
        <FormGroup row>
          <Col sm={12}>
            <Input type="textarea" onChange={this.handleChange} name="siteAddress" placeholder={placeholders.siteAdd} id="siteAddress" />
          </Col>
        </FormGroup>
        {/* ...其余表单内容省略... */}
        <FormGroup check row>
          <Col sm={{ size: 10, offset: 2 }}>
            <Link to="/newSite/tours"><Button className="btn-primary">Tours &rarr;</Button></Link>
          </Col>
        </FormGroup>
      </Form>
    );
  }
}

方案2：用Getter封装语言逻辑（更简洁）

如果想让render方法更干净，可以把语言判断逻辑封装成类的getter方法：

export default class NewFormDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 你的state内容不变
    };
  }

  // 封装语言逻辑为getter
  get jsonLang() {
    const { language } = this.state;
    return language === 'es' ? data.es : data.en;
  }

  handleChange = (e) => {
    this.setState({ 
      ...this.state, 
      [e.target.name]: e.target.value 
    });
  }

  handleSubmit = () => {
    console.log(this.state);
  }

  render() {
    // 直接从getter中解构需要的变量
    const { placeholders, counties } = this.jsonLang;

    return (
      // 你的表单代码不变
    );
  }
}

额外注意点 #

• 原代码中counties对应的Input组件缺少name="counties"属性，我已经补充上了——没有这个属性，handleChange无法正确更新state中的counties字段。
• 事件处理函数用箭头函数作为类字段是最简洁的绑定this的方式，如果你不想用箭头函数，也可以在constructor里手动绑定：

  constructor(props) {
    super(props);
    // ...state定义
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  // 此时handleChange可以写成普通方法
  handleChange(e) {
    this.setState({ 
      ...this.state, 
      [e.target.name]: e.target.value 
    });
  }
  

内容的提问来源于stack exchange，提问作者TiernO