Saya mencoba mendapatkan data dari API di React menggunakan Axios. Bagaimana cara agar useEffect berfungsi dengan baik?

Saya mencoba membuat halaman menggunakan data yang diambil dari API di React menggunakan Axios. Saya memiliki komponen bernama PersonList yang harus mengambil data dan mengirimkannya ke PersonCard, yang kemudian masuk ke App.js saya. Saya mengalami kesulitan untuk merendernya, dan mendapatkan banyak kesalahan yang awalnya tidak saya dapatkan. Ini kode saya di PersonList, yang merupakan komponen yang tampaknya menyebabkan kesalahan:

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>

       )
    }

Saya seharusnya bisa console.log data yang datang kembali dari API di jendela browser, tetapi tidak hanya saya tidak bisa melihat data, itu kembali tidak terdefinisi, tapi saya mendapatkan semua jenis kesalahan termasuk yang ini -

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

  48 |             </Row>
  49 |         </Container>
> 50 |     };
     |     ^
  51 | }
0
James Crowley 27 Oktober 2019, 20:44

1 menjawab

Jawaban Terbaik

Anda harus menghapus return inside return, menghapus kurung kurawal di people.map (lihat ekspresi fungsi panah JS) dan tutup setiap tag dan kurung kurawal yang Anda buka

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>
)
0
Max 27 Oktober 2019, 17:49