Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'json')

Question

Problem is that when i press selector to select continents its gives me this error /Search buy the way works fine only problem is with selector it maybe due to me using react-router-domV6 and Axios don't know

Search works well buy the way Thanks in advance [1]: https://i.stack.imgur.com/US56E.png

Controls.jsx

        import React from 'react';
        import { Search } from './Search';
        import {useState, useEffect} from "react";
        import {CustomSelect} from './CustomSelect';
        import styled from 'styled-components';
        const options=
       [
         {value: 'Америка',label: 'Америка'},
         {value: 'Європа',label: 'Європа'},
         {value: 'Азія',label: 'Азія'},
         {value: 'Африка',label: 'Африка'},
         {value: 'Океанія',label: 'Океанія'},
         {value: 'Австралія',label: 'Австралія'},
       ];
       const Wrapper=styled.div`
       display:flex;
       flex-direction:column;
       align-items:flex-start;
        @media (min-width: 768px) 
       {
         flex-direction:row;
         justify-content:space-between;
         align-items:center;
        }
       `;
         export const Controls = ({onSearch}) => {
          const [search,setSearch]=useState('');
          const [region,setRegion]=useState('');
          useEffect(()=>{
           const regionValue = region?.value;
           onSearch(search,regionValue);
          // eslint-disable-next-line
          },[search,region]);

        return (
         <Wrapper>
          <Search search={search} setSearch={setSearch}/>
           <CustomSelect
         options={options}
         placeholder='Континент'
         isClearable
         isSearchable={false}
         value={region}
         onChange={setRegion}
          />
        </Wrapper>
        );
      };

HomePage.jsx

     import React from 'react';
     import axios from 'axios';
     import { useState, useEffect } from 'react';
     import { useNavigate,useParams } from 'react-router-dom';
     import { Main } from '../components/Main';
     import { Controls } from '../components/Controls';
     import { ALL_COUNTRIES } from '../config';
     import { List } from '../components/List';
     import { Card } from '../components/Card';
     import { Details } from './Details';

      export const HomePage = ({countries,setCountries}) => {
       const [filteredCountries,setFilteredCountries] = useState(countries);
       const  navigate  = useNavigate();
       const handleSearch =(search,region)=>{
       let data=[...countries];
       if(region){
        data=data.filter(c=>c.region.includes(region))
        }
        if(search){
          data=data.filter(c=>c.name.toLowerCase().includes(search.toLowerCase()))
        }
        setFilteredCountries(data);
        };
       useEffect(() => {
      if(!countries.lenght)
       axios.get(ALL_COUNTRIES).then(
        ({data})=>setCountries(data))
        .then(result => result.json)
        },[]);
        return (
         <>
           <Controls onSearch={handleSearch}/>
           <List>
        {
          filteredCountries.map((c)=>
          {
            const countryInfo={
              img:c.flags.png,
              name:c.name,
              info: [
                {
                  title:'Population',
                  description:c.population.toLocaleString(),
                },
                {
                  title:'Region',
                  description:c.region,
                },
                {
                  title:'Flag',
                  description:c.capital,
                },
              ],

             };
               return <Card key={c.name} onClick={(e)=>{navigate(`/country/${c.name}`)}} 
            {...countryInfo}/>
            })
           }
           </List>
           </>
           );
          };

Answer 1

The setCountries function is a void return. It doesn't return anything for the next then-able of the Promise chain. If countries is an array then you've also a typo access the array length property.

useEffect(() => {
  if (!countries.lenght) // countries.lenght is false so resolves true always
    axios.get(ALL_COUNTRIES)
      .then(({ data }) => setCountries(data)) // setCountries returns undefined
      .then(result => result.json) // result is undefined
}, []);

Perhaps you meant to check the length and then return the JSON Promise

Example:

useEffect(() => {
  if (!countries.length) {
    axios.get(ALL_COUNTRIES)
      .then(result => result.json()) // <-- invoke json()
      .then(({ data }) => setCountries(data));
  }
}, []);

If I'm not mistaken though, the axios function returns the JSON response data "unpacked" already, so the result.json() call may not be necessary.

useEffect(() => {
  if (!countries.length) {
    axios.get(ALL_COUNTRIES)
      .then(({ data }) => setCountries(data));
  }
}, []);

Answer 2

I found the answer I just split useEffect for Search and Selector

useEffect(() => {
    if (!countries.length)
        axios.get(ALL_COUNTRIES).then(({ data }) => setCountries(data));
   // eslint-disable-next-line
}, []);


useEffect(() => {
    handleSearch();
  // eslint-disable-next-line
}, [countries]);

maybe it was due to useEffect limitation