CODEWITHSUNDEEP
javascriptreactjsundefined
TeerLs
TeerLs

Reputation: 57

useEffect and undefined

I'm trying to kick off undefined, but I don't understand, what I'm doing wrong. I need to initialize persons without undefinedenter image description here

import { useEffect, useState } from "react";
import { SearchBar } from "./SearchBar";
import { getPersons } from "../../apies/api";
import { ListOfPersons } from "./listOfPersons";
const Home = () => {
    const [valueOfInput, valueOfInputChange] = useState("")
    const [persons, setPersons] = useState()

    useEffect(() => {
        getPersons().then(response => setPersons(response))
    }, [setPersons]); 
    console.log(persons)

    return <div>
       <h1>Поиск персонажей</h1>
       <SearchBar personGetRequest={valueOfInputChange}/> 
       <ListOfPersons personsList={persons}/>
    </div>;
};

export default Home;

Upvotes: 1

Views: 1220

Answers (3)

Francesco Vattiato
Francesco Vattiato

Reputation: 488

I would suggest you to:

  1. Call the function getPersons only on mount of the component with an empty array in the dependencies array
  2. Inizialize the persons state with an empty array
  3. Be careful about the type of the response of your api (an object with count,next,previous,result fields), in order to call the function setPersons with the result
  4. Take care of errors when call the getPersons api with a catch statement which will set an empty array, for example.
  5. You may would read persons only when persons change instead of every render, so you could put your console.log inside an useEffect with persons array inside the dependencies array.
import { useEffect, useState } from "react";
import { SearchBar } from "./SearchBar";
import { getPersons } from "../../apies/api";
import { ListOfPersons } from "./listOfPersons";
const Home = () => {
    const [valueOfInput, valueOfInputChange] = useState("")
    const [persons, setPersons] = useState([])

    useEffect(() => {
        getPersons()
         .then(response => setPersons(response.data.results))
         .catch(e => setPersons([])
    }, []);

    useEffect(()=>console.log(persons),[persons])

    return <div>
       <h1>Поиск персонажей</h1>
       <SearchBar personGetRequest={valueOfInputChange}/> 
       <ListOfPersons personsList={persons}/>
    </div>;
};

export default Home;

Upvotes: 1

hassanqshi
hassanqshi

Reputation: 363

You should initialize the persons with empty array then it will not show undefined. Like the below code

const [persons, setPersons] = useState([])

Upvotes: 2

zeeshan zahoor
zeeshan zahoor

Reputation: 77

You Should use this for fetching data

useEffect(() => {
   getPersons().then(response => setPersons(response.data.data))
}, [setPersons]); 

console.log(persons)

Upvotes: 0

Related Questions