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

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;

CodePudding user response：

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

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

CodePudding user response：

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;

CodePudding user response：

You Should use this for fetching data

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

console.log(persons)