An empty array is returned when using useState in React

Question

function Search(){
    const [title, setTitle]=useState('');
    const [book, setBook]=useState([]);
    
    const onChange=(e)=> setTitle(e.target.value);

    const headers= {};
    const getBookList= async ()=>{
        try{
            const response=await axios.get(`https://dapi.kakao.com/v3/search/book?target=title&query=${title}`, {headers});
            setBook(response.data.documents);
            console.log(response.data.documents);
        }catch(e){
            console.log(e);
        }
    };

    useEffect(()=>{
        getBookList();
        console.log(book);
    },[]);

    return (
        <div>
            <input value={title} onChange={onChange}></input>
            <button onClick={getBookList}>push</button>
            <div>{book[0]}</div>
        </div>
    );
}

export default Search;

response.data.documents holds data like photos:

However, the variable called book does not contain anything. book[0] outputs nothing. How can we process this data?

book[0] is undefined the first time the component renders, because you set the default state to be []. You also won't see anything when you console.log(book) because that hasn't been reassigned at that point. — jonrsharpe
– jonrsharpe, Commented Aug 10, 2021 at 8:39
Thank you ! To use the book variable, I have to wait for it to be assigned a value before using it? — sojinLee
– sojinLee, Commented Aug 10, 2021 at 8:52

Oliver Ilmjärv · Accepted Answer · 2021-08-10 09:59:00Z

1

The promise has not been fulfilled yet when you are logging it. try like this

// two useeffect hooks, one for logging, other for populating
useEffect(()=>{
        getBookList();
},[]);

useEffect(()=>{
        console.log(book);
},[book]);

the whole component might look like this

function Search(){
  const [title, setTitle]=useState('');
  const [book, setBook]=useState([]);
  
  const onChange=(e)=> setTitle(e.target.value);

  const headers= {};
  const getBookList= ()=>{
    axios.get(`https://dapi.kakao.com/v3/search/book?target=title&query=${title}`, {headers}).then(res => {
      setBook(res.data.documents)
    })
  };

  useEffect(()=>{
    getBookList()
  },[]);

  return (
      <div>
          <input value={title} onChange={onChange}></input>
          <button onClick={getBookList}>push</button>
          <div>{book.length > 0 ? JSON.stringify(book[0]) : ""}</div>
      </div>
  );
}

export default Search;

Note: {book.length > 0 ? book[0] : ""} is for checking if the array has been populated, since at the moment the component loads, the request response hasnt arrived yet

Edit: do not render json in the dom, JSON.stringify(book[0]) is the correct way, if you want to see the json data.

edited Aug 10, 2021 at 9:59

answered Aug 10, 2021 at 8:40

Oliver Ilmjärv

3412 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sojinLee Over a year ago

Thanks for your help. However, I tried adding this(<div>{book.length > 0 ? book[0] : ""}</div> ) content, but I got an error. Is there any other way ?😂😂

Oliver Ilmjärv Over a year ago

@sojinLee, i assume its because you are trying to render JSON to the dom, just add JSON.stringify(book[0])

Collectives™ on Stack Overflow

An empty array is returned when using useState in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related