TypeError: Cannot read property 'Countries' of undefined. Почему не распознается массив объектов?

Question

[Рома]

Я получаю объект из API(https://api.covid19api.com/summary). В этом объекте есть ключ Countries с массивом объектов и этот массив объектов мне нужно отфильтровать.

const filteredData = data.Countries.filter(dat => {
        return dat.Country.toLowerCase().includes(searchfield.toLowerCase());
      })

TypeError: Cannot read property 'Countries' of undefined. Почему не распознается и не фильтруется массив объектов?
В другом файле такое же написание data.Countries метод map перебирает без ошибки.

const Home = () => {
    const [data, setData] = useState();
    const [searchfield, setSearchfield] = useState('')
    useEffect(() => {
        const fetch = async () => {
            try{
                const res = await axios.get('https://api.covid19api.com/summary');
                setData(res.data);
            }catch(error){
                console.log(error);
            }
        };
        fetch();
    }, []);
    
    const onSearchChange = (event) => {
        setSearchfield(event.target.value)
      }

      const filteredData = data.Countries.filter(dat => {
        return dat.Country.toLowerCase().includes(searchfield.toLowerCase());
      })   
    
    return (
        <div className="main-container">
            <Header searchChange={onSearchChange}/>
            <div className="wrapper">
                <Card data={data}/>
                {/*<div className="graph">
                    <h1>Global Pandemic Crisis Graph</h1>
                    <img src={COVID.image} alt=""/>
                </div>*/}
                <div className="countries">
                    <Countries data={filteredData}/>
                </div>
            </div>
            {/*<Footer />*/}
        </div>
    )
}

export default Home;

Answer 1

[Kirill Makarov]

data?.Countries?.filter попробуй так если не поможет выводи в консоль и смотри что там