Reactjs语法问题：let jsonLang下的意外令牌

Question

我尝试了无数的谷歌搜索和故障排除。我正在在线学习教程，并且在教程中他们使用了这种语法（其中javascript代码位于构造函数下方和渲染上方。

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
        };
    }

    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;

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

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

    render() {
        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}>
                            <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 row>
                    <Col sm={6}>
                        <Input type="email" name="siteEmail" onChange={this.handleChange} id="siteEmail" placeholder={placeholders.email} />
                    </Col> 
                    <Col sm={6}>
                        <Input type="tel" name="siteNumber" onChange={this.handleChange} id="siteNumber" placeholder={placeholders.number}/>
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={6}>
                        <Input type="select" name="siteCat" onChange={this.handleChange} id="siteCat" multiple placeholder={placeholders.categories}>
                            <option className="selectDefault" disabled selected>{placeholders.categories}</option>
                            <option value="">1</option>
                            <option value="">1</option>
                            <option value="">1</option>
                            <option value="">1</option>
                        </Input>
                    </Col>
                    <Col sm={6}>
                        <Input type="text" name="openTimes" onChange={this.handleChange} id="openTimes" placeholder={placeholders.times} />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={6}>
                        <Input type="textarea" name="fees" onChange={this.handleChange} id="fees" placeholder={placeholders.fees}/>
                    </Col>
                    <Col sm={6}>
                        <Input type="text" name="access" onChange={this.handleChange} id="access" placeholder={placeholders.access} />
                    </Col>
                </FormGroup>
                <hr/>
                {/* Location Information */}
                <FormGroup row> 
                    <Col sm={6}>
                        <Input type="text" name="gps" onChange={this.handleChange} id="gps" placeholder={placeholders.gps}/>
                    </Col>
                    <Col sm={6}>
                        <Input type="text" name="w3w" id="w3w" onChange={this.handleChange} placeholder={placeholders.w3w} />
                    </Col>
                </FormGroup>
                <hr/>
                <FormGroup row>
                    <Col sm={12}>
                        <Input type="textarea" name="txtHeader" onChange={this.handleChange} id="txtHeader" placeholder={placeholders.textHeader} />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={12}>
                        <Input type="textarea" name="txtContent" onChange={this.handleChange} id="txtContent" placeholder={placeholders.textContent} />
                    </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>
        );
    }
}

但是我收到错误消息：Unexpected token under let jsonLang;。

请帮助！我尝试添加/删除大括号，分号等。

Answer 1

您在包含“}”时出错。现在，您不在构造函数方法的范围内，并且只能编写普通的JavaScript，这意味着您可以使用“ var”定义变量

var jsonLang ='en'

或将逻辑放在setState之后

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
    };

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;
}

Answer 2

问题是您的render（）方法超出了constructor（）范围块。

应该是：

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
        };
    }

    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;

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

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

        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}>
                            <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 row>
                    <Col sm={6}>
                        <Input type="email" name="siteEmail" onChange={this.handleChange} id="siteEmail" placeholder={placeholders.email} />
                    </Col>
                    <Col sm={6}>
                        <Input type="tel" name="siteNumber" onChange={this.handleChange} id="siteNumber" placeholder={placeholders.number} />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={6}>
                        <Input type="select" name="siteCat" onChange={this.handleChange} id="siteCat" multiple placeholder={placeholders.categories}>
                            <option className="selectDefault" disabled selected>{placeholders.categories}</option>
                            <option value="">1</option>
                            <option value="">1</option>
                            <option value="">1</option>
                            <option value="">1</option>
                        </Input>
                    </Col>
                    <Col sm={6}>
                        <Input type="text" name="openTimes" onChange={this.handleChange} id="openTimes" placeholder={placeholders.times} />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={6}>
                        <Input type="textarea" name="fees" onChange={this.handleChange} id="fees" placeholder={placeholders.fees} />
                    </Col>
                    <Col sm={6}>
                        <Input type="text" name="access" onChange={this.handleChange} id="access" placeholder={placeholders.access} />
                    </Col>
                </FormGroup>
                <hr />
                {/* Location Information */}
                <FormGroup row>
                    <Col sm={6}>
                        <Input type="text" name="gps" onChange={this.handleChange} id="gps" placeholder={placeholders.gps} />
                    </Col>
                    <Col sm={6}>
                        <Input type="text" name="w3w" id="w3w" onChange={this.handleChange} placeholder={placeholders.w3w} />
                    </Col>
                </FormGroup>
                <hr />
                <FormGroup row>
                    <Col sm={12}>
                        <Input type="textarea" name="txtHeader" onChange={this.handleChange} id="txtHeader" placeholder={placeholders.textHeader} />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={12}>
                        <Input type="textarea" name="txtContent" onChange={this.handleChange} id="txtContent" placeholder={placeholders.textContent} />
                    </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>
        );
    }

}

Answer 3

let jsonLang;
const language = 'ss' ;

 if (this.language == 'ss') {
       jsonLang = language.data;
   console.log(jsonLang);

    } else {
      jsonLang = language.data;
        console.log(language);
    }

Answer 4

类定义内的代码必须位于class method之内，才能生效。如果您希望每次实例化某个对象时都可以运行某些内容，则可以在构造函数内或在所述构造函数内调用的方法中编写所述指令：

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
      };

      let jsonLang;

      if (this.state.language == 'en') {
          jsonLang = data.en;
      } else if (this.state.language == 'es') {
          jsonLang = data.es;
      } else {
          jsonLang = data.en;
      }

      this.placeholders = jsonLang.placeholders;
      this.counties = jsonLang.counties;
  }

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

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

  render() {
      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={this.placeholders.siteName}/>
                  </Col>
                  <Col sm={6}>
                      <Input className="form-control" type="select" id="counties" onChange={this.handleChange}>
                          <option className="selectDefault" disabled value={this.placeholders.siteCounties} selected>{this.placeholders.siteCounty}</option>
                          { this.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={this.placeholders.siteAdd} id="siteAddress" />
                  </Col>
              </FormGroup>
              <FormGroup row>
                  <Col sm={6}>
                      <Input type="email" name="siteEmail" onChange={this.handleChange} id="siteEmail" placeholder={this.placeholders.email} />
                  </Col> 
                  <Col sm={6}>
                      <Input type="tel" name="siteNumber" onChange={this.handleChange} id="siteNumber" placeholder={this.placeholders.number}/>
                  </Col>
              </FormGroup>
              <FormGroup row>
                  <Col sm={6}>
                      <Input type="select" name="siteCat" onChange={this.handleChange} id="siteCat" multiple placeholder={this.placeholders.categories}>
                          <option className="selectDefault" disabled selected>{this.placeholders.categories}</option>
                          <option value="">1</option>
                          <option value="">1</option>
                          <option value="">1</option>
                          <option value="">1</option>
                      </Input>
                  </Col>
                  <Col sm={6}>
                      <Input type="text" name="openTimes" onChange={this.handleChange} id="openTimes" placeholder={this.placeholders.times} />
                  </Col>
              </FormGroup>
              <FormGroup row>
                  <Col sm={6}>
                      <Input type="textarea" name="fees" onChange={this.handleChange} id="fees" placeholder={this.placeholders.fees}/>
                  </Col>
                  <Col sm={6}>
                      <Input type="text" name="access" onChange={this.handleChange} id="access" placeholder={this.placeholders.access} />
                  </Col>
              </FormGroup>
              <hr/>
              {/* Location Information */}
              <FormGroup row> 
                  <Col sm={6}>
                      <Input type="text" name="gps" onChange={this.handleChange} id="gps" placeholder={this.placeholders.gps}/>
                  </Col>
                  <Col sm={6}>
                      <Input type="text" name="w3w" id="w3w" onChange={this.handleChange} placeholder={this.placeholders.w3w} />
                  </Col>
              </FormGroup>
              <hr/>
              <FormGroup row>
                  <Col sm={12}>
                      <Input type="textarea" name="txtHeader" onChange={this.handleChange} id="txtHeader" placeholder={this.placeholders.textHeader} />
                  </Col>
              </FormGroup>
              <FormGroup row>
                  <Col sm={12}>
                      <Input type="textarea" name="txtContent" onChange={this.handleChange} id="txtContent" placeholder={this.placeholders.textContent} />
                  </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>
      );
  }
}