时间戳

首页 > 解决方案 > 无法让 React 应用程序渲染，出现错误：未终止的 JSX 内容

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

问题描述

我正在尝试使用 Axios 从 React 中的 API 获取数据。如何让 useEffect 正常工作？

我正在尝试使用从使用 Axios 的 React 中的 API 获取的数据来构建页面。我有一个名为 PersonList 的组件，它应该获取数据并将其发送到 PersonCard，然后发送到我的 App.js。我在渲染它时遇到了麻烦，并且遇到了一堆我一开始没有遇到的错误。这是我在 PersonList 中的代码，它似乎是导致错误的组件：

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>

       )
    }

我应该能够在浏览器窗口中控制台记录从 API 返回的数据，但我不仅看不到数据，而且返回的数据未定义，而且我遇到了各种错误，包括这个错误 -

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

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

标签： javascriptreactjs

解决方案

您应该删除 return 内的 return，删除花括号people.map（请参阅JS 箭头函数表达式）并关闭您打开的每个标签和大括号

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>
)

推荐阅读