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

Question

Я получаю объект из 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

Ваш компонент рендерится за два прохода - первый проход с пустым стейтом data, а второй проход уже с результатами запроса. Вот на первом проходе и возникает ошибка. Один из способов исправления ошибки - проверка содержимого data перед фильтрацией:

  let filteredData = [];
  if (data) {
    data.Countries.filter(dat => {
      return dat.Country.toLowerCase().includes(searchfield.toLowerCase());
    })
  }

или в более короткой записи (с Элвис-оператором ?.):

  const filteredData = data?.Countries.filter(
    dat => dat.Country.toLowerCase().includes(searchfield.toLowerCase())
  ) ?? [];

БЛОГ НА HUSL

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

Ответы (1 шт):