मैं Axios का उपयोग कर प्रतिक्रिया में एक एपीआई से डेटा प्राप्त करने की कोशिश कर रहा हूँ। मैं ठीक से काम करने के लिए useEffect कैसे प्राप्त करूं?

मैं Axios का उपयोग कर प्रतिक्रिया में एक एपीआई से प्राप्त डेटा का उपयोग कर एक पृष्ठ बनाने की कोशिश कर रहा हूँ। मेरे पास पर्सनलिस्ट नामक एक घटक है जो डेटा लाने और उसे पर्सनकार्ड के साथ भेजना चाहिए, जो तब मेरे ऐप.जेएस पर जाता है। मुझे इसे प्रस्तुत करने में परेशानी हो रही है, और त्रुटियों का एक गुच्छा मिल रहा है जो मुझे पहले नहीं मिल रहा था। यहाँ पर्सनलिस्ट में मेरा कोड है, जो वह घटक है जो त्रुटि उत्पन्न कर रहा है:

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>

       )
    }

मुझे ब्राउज़र विंडो में एपीआई से वापस आने वाले डेटा को कंसोल करने में सक्षम होना चाहिए, लेकिन न केवल मैं डेटा नहीं देख सकता, यह अपरिभाषित वापस आ रहा है, लेकिन मुझे इसमें शामिल सभी प्रकार की त्रुटियां मिल रही हैं -

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

  48 |             </Row>
  49 |         </Container>
> 50 |     };
     |     ^
  51 | }
0
James Crowley 27 अक्टूबर 2019, 20:44

1 उत्तर

सबसे बढ़िया उत्तर

आपको रिटर्न इनसाइड रिटर्न को हटाना चाहिए, 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>
)
0
Max 27 अक्टूबर 2019, 17:49