React Component问题（预期为“;”，但发现为“，”）

Question

This is driving me crazy. I just started playing around with react trying to learn, but i can't even make a simple API call because of a extremely weird error....

This is my code ->

import React, {Component} from 'react';

class ApiPosts extends Component {
    constructor() {
        super();
        this.state = {
            blogPosts: [],
        };
    }
}

componentDidMount(){

    fetch('http://localhost:53595/blog/posts')
    .then(results => {
        return results.json();
    }).then(data => {
        let blogPosts = data.results.map((post) => {
            return(
                <div key={post.results}>
                    <div>{post.body}</div>
                </div>
            )
        });
        this.setState({blogPosts: blogPosts});
        console.log("state", this.state.blogPosts);
    })
}

render(){
    return (
        <div className="container2">
            <div className="container1">
                {this.state.blogPosts}
            </div>
        </div>
    )
}

Lines 12 and 30 ("componentDidMount(){ & render(){") are throwing me an error showing that i haven't closed them with ';'.

The error shows up in visual studio code & fails to build my app with the following error ->

/react-website/src/ApiPosts.js: Unexpected token, expected ; (12:19)

I literally tried to close EVERYTHING in that file just to see where the error is coming from, but no luck.

Any idea?

Answer 1

Move componentDidMount and render function within your component class. They are outside of the class in given code snippet.

import React, {Component} from 'react';

class ApiPosts extends Component {
    constructor() {
        super();
        this.state = {
            blogPosts: [],
        };
    }
    componentDidMount() {}
    render() {}
}

Answer 2

You have componentDidMount and render defined outside of the component itself.

It should look like this:

import React, {Component} from 'react';

class ApiPosts extends Component {
    constructor() {
        super();
        this.state = {
            blogPosts: [],
        };
    }

    componentDidMount() {
       fetch('http://localhost:53595/blog/posts')
        .then(results => {
            return results.json();
        }).then(data => {
            let blogPosts = data.results.map((post) => {
                return(
                    <div key={post.results}>
                        <div>{post.body}</div>
                    </div>
                )
            });
            this.setState({blogPosts: blogPosts});
            console.log("state", this.state.blogPosts);
        })
    }

    render() {
        return (
            <div className="container2">
                <div className="container1">
                    {this.state.blogPosts}
                </div>
            </div>
        )
    }
}