无法让 React 应用程序渲染，出现错误：未终止的 JSX 内容

Question

I'm trying to get data from an API in React using Axios. How do I get useEffect to work properly?

I am trying to build a page using data fetched from an API in React using Axios. I have a component called PersonList that should be fetching the data and sending it along to PersonCard, which then goes to my App.js. I'm having trouble getting it to render, and getting a bunch of errors that I wasn't getting at first. Here is my code in PersonList, which is the component that seems to be causing the error:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import PersonCard from '../components/PersonCard';
import { Container, Row } from 'reactstrap';

export default function PersonList ()
{

    const [people, setPeople] = useState([]);

    useEffect(() =>
    {
        axios
            .get(`https://swapi.co/api/people/1/`)
            .then(res =>
            {
                const personInfo = res.datas
                setPeople(personInfo)
                console.log('Star Wars Character Info:', personInfo)

            })
            .catch(err =>
            {
                console.log('The API data was not returned', err)
            });
    }, []);


    return (
        <Container>
            <Row>
          {people.map(person =>
            {
             <PersonCard
                name={person.name}
                height={person.height}
                weight={person.mass}
                hairColor={person.hair_color}
                birthday={person.birth_year}
                gender={person.gender}
                home={person.homeworld}
                species={person.species}
                films={person.films}
                vehicles={person.vehicles}
                ships={person.starships}
              /> 
          }
        )}
            </Row>
         </Container>

       )
    }

I should be able to console.log the data coming back from the API in the browser window, but not only can I not see the data, it's coming back undefined, but I am getting all kinds of errors includeing this one -

./src/components/PersonList.js
  Line 50:5:  Parsing error: Unexpected token, expected ","

  48 |             </Row>
  49 |         </Container>
> 50 |     };
     |     ^
  51 | }

Answer 1

You should remove return inside return, remove curly braces in people.map (see JS arrow function expressions ) and close every tag and braces you opened

return (
  <Container>
    <Row>
      <Container>
        <Row>
          {people.map(person =>
            <PersonCard
              name={person.name}
              height={person.height}
              weight={person.mass}
              hairColor={person.hair_color}
              birthday={person.birth_year}
              gender={person.gender}
              home={person.homeworld}
              species={person.species}
              films={person.films}
              vehicles={person.vehicles}
              ships={person.starships}
            />
          )}
        </Row>
      </Container>
    </Row>
  </Container>
)