Empty response from API with React

user_11610909 0
Viewed 298

I'm using the Google books API to fetch data. When I click the button to fetch the data the response is an empty array. I don't know what I'm doing wrong with the async function.

export default function SearchInput() {
  const [inputSearch, setInput] = useState("")
  const [bookSearch, setBookSearch] = useState([])

  //async function to retrieve data from an API
  const fetchBooks = async() => {
    const res = await fetch(
      `https://www.googleapis.com/books/v1/volumes?q=flowers+inauthor:keyes&key=${apikey}`
    );
    const data = await res.json();
    setBookSearch(bookSearch);
    console.log(bookSearch); //shows an empty array
  }

  //search function
  const handleSearch = (e) => {
    e.preventDefault();
    fetchBooks();
  }    

  return (
    <div>
      <h2>search book</h2>
      <p>libro: {inputSearch}</p>
      <form onSubmit={handleSearch}> // this trigger the search function
        <input placeholder="Title, Author" 
          type="text"
          value={inputSearch}
          onChange={e=>{setInput(e.target.value)}}/>
        <button type="submit">Search</button>
      </form>
    </div>
  );
}
use-state async-await react-hooks reactjs javascript
1 Answers

In your fetchBooks() you set the bookSearch state to its own value every time by calling setBookSearch(bookSearch). As the value of bookSearch is an empty array by default, it will be an empty array every single time. Make sure you update the state with the fetched data:

const fetchBooks = async () => {
  const res = await fetch(URL);
  const data = await res.json();
  setBookSearch(data);
  console.log(bookSearch); // it's not yet set!
};

You also tried to log the state right after you "updated" it. Don't forget that useState is asynchronous just like setState in class components. You can't update the state on one line and assume it's already changed on the next one. You'll likely log the unchanged state. If you want to log the new value once it's changed, you can use the useEffect hook.

user_61263730
Related