Реагировать на синтаксическую ошибку страницы регистрации при возврате функции визуализации

Question

У меня есть страница регистрации реакции, которая возвращает ошибку при возврате метода рендеринга. Он показывает синтаксическую ошибку всякий раз, когда я запускаю код в браузере. Код предназначен для передачи данных на конечную точку сервера. Я просмотрел все и не могу найти причину ошибки. Я хотел бы знать вероятную причину этой проблемы и действия или код для исправления этой ошибки

`import React, { Component } from 'react';

class Register extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            name:'',
            town: '',
            long: '',
            lat: ''
         }
    }

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

    onSubmit = (e) => {
        e.preventDefault();
        const Register = {
            name: this.state.name,
            town: this.state.town,
            long: this.state.long,
            lat: this.state.lat
        }
    }

}
    fetch ('https://localhost3000/users/', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            name: 'name',
            city: 'city',
            long: 'long',
            lat: 'lat'
        })
    })
    .then(function(response){
        return response.json();
    })
    .then(function(Register){
        console.log(Register)
    });

    *render() {  
        return ( *
            <div>
                <form className="form-style">
                    <label>
                    Name:<br/>
                    <input name='name' value={this.state.name}
                    placeholder="Enter Your Farm Name"
                    onChange={e => this.handleChange(e)}/>
                    </label><br/>
                    <label>
                    Town:<br/>
                    <input name='town' value={this.state.town}
                    placeholder="Enter town where farm is located"
                    onChange={e => this.handleChange(e)}/>
                    </label><br/>
                    <label>
                    Longitude:<br/>
                    <input name='long' value={this.state.long}
                    placeholder="Enter Your Farm Longitude"
                    onChange={e => this.handleChange(e)}/><br/>
                    Latitude:<br/>
                    <input name='lat' value={this.state.lat}
                    placeholder="Enter Your Farm Latitude"
                    onChange={e => this.handleChange(e)}/>
                    </label><br/>
                    <Link><a href="https://www.latlong.net/" target="_blank">
                    Get Longitude and Latitude of current location here</a></Link><br/>
                    <button onClick={e => this.handleSubmit(e)}
                    disabled={!this.state.name}
                    disabled={!this.state.long}
                    disabled={!this.state.lat}
                    disabled={!this.state.town}>
                    Register</button>
                </form>


            </div>    
        )

    };


export default Register ;`

Answer 1

В вашем коде есть неправильный } сразу после определения функции onSubmit. Это закрыло ваш компонент и сделало весь ваш код недействительным. Вы также пытаетесь вызвать fetch внутри своего компонента, не находясь внутри какого-либо метода, функции или события жизненного цикла. Это приведет к синтаксической ошибке. Попробуйте вместо этого:)

import React from "react"
import { Link } from "react-router-dom"

class Register extends React.Component {
    constructor(props) {
        super(props)
        this.state = { 
            name:'',
            town: '',
            long: '',
            lat: ''
         }
    }

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

    componentDidMount(){
      fetch ('https://localhost3000/users/', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            name: 'name',
            city: 'city',
            long: 'long',
            lat: 'lat'
        })
    })
    .then(function(response){
        return response.json();
    })
    .then(function(Register){
        console.log(Register)
    })
    }

    onSubmit = (e) => {
        e.preventDefault()
        const Register = {
            name: this.state.name,
            town: this.state.town,
            long: this.state.long,
            lat: this.state.lat
        }
    }

    render(){  
        return (
            <div>
                <form className="form-style">
                    <label>
                    Name:<br/>
                    <input name='name' value={this.state.name}
                    placeholder="Enter Your Farm Name"
                    onChange={e => this.handleChange(e)}/>
                    </label><br/>
                    <label>
                    Town:<br/>
                    <input name='town' value={this.state.town}
                    placeholder="Enter town where farm is located"
                    onChange={e => this.handleChange(e)}/>
                    </label><br/>
                    <label>
                    Longitude:<br/>
                    <input name='long' value={this.state.long}
                    placeholder="Enter Your Farm Longitude"
                    onChange={e => this.handleChange(e)}/><br/>
                    Latitude:<br/>
                    <input name='lat' value={this.state.lat}
                    placeholder="Enter Your Farm Latitude"
                    onChange={e => this.handleChange(e)}/>
                    </label><br/>
                    <Link><a href="https://www.latlong.net/" target="_blank">
                    Get Longitude and Latitude of current location here</a></Link><br/>
                    <button onClick={e => this.handleSubmit(e)}
                    disabled={!this.state.name}
                    disabled={!this.state.long}
                    disabled={!this.state.lat}
                    disabled={!this.state.town}>
                    Register</button>
                </form>

            </div>    
        )
    }

  }

export default Register