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

Question

問題是，當我按下選擇器選擇大陸時，它給了我這個錯誤/搜索購買方式工作正常，唯一的問題是選擇器可能是由於我使用 react-router-domV6 而 Axios 不知道

搜索效果很好，購買方式提前謝謝[1]： https ://i.stack.imgur.com/US56E.png

控件.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>
        );
      };

主頁.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

setCountries函數是一個 void 返回。 它不會為 Promise 鏈的下一個 then-able 返回任何東西。 如果countries是一個數組，那么您在訪問數組長度屬性時也會出現拼寫錯誤。

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
}, []);

也許您打算檢查長度，然后返回 JSON Promise

例子：

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

如果我沒記錯的話， axios函數已經返回了“解包”的 JSON 響應數據，因此可能不需要調用result.json() 。

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

Answer 2

我找到了我剛剛將useEffect拆分為 Search 和 Selector 的答案

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


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

可能是由於useEffect限制