В чем проблема в ловушке React при получении данных из API

Question

У меня есть следующий компонент функции

import React ,{useState,useEffect} from "react";
export default function Statistics() {
       const [data, setData] = useState([]);

    useEffect(() => {
        fetch("https://hn.algolia.com/api/v1/search")
            .then(response => response.json())
            .then(data => setData(data));
    }, []);


       return (

                data.map(el =>
                    <div>{el.title}</div>
                )

              );
}

Я получаю ошибку:

Uncaught TypeError: data.map не является функцией

в чем проблема в предыдущем коде?

Answer 1

Только что проверил конечную точку API, с которой вы работаете. Кажется, вам нужно свойство hits, потому что это массив. В вашем текущем решении data - это объект, которому не нужно вызывать .map(). Если вы измените значение с data на data.hits, то вы можете перебрать массив с помощью .map().

Попробуйте выполнить следующее:

useEffect(() => {
   fetch("https://hn.algolia.com/api/v1/search")
   .then(response => response.json())
   .then(data => setData(data.hits));
}, []);

Надеюсь, это поможет!