Javascript 。筛选器不是一个函数。试图从API数据中搜索名称

Javascript 。筛选器不是一个函数。试图从API数据中搜索名称,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,我正在尝试使用countries API在这个迷你应用程序中实现一个搜索过滤器。但是,我知道错误过滤器不是一个函数 现在我认为这是因为数据必须是一个数组,才能使filter()工作。我不确定如何才能访问数据进行搜索 挣扎着让我的头围绕着这个 示例response.data from my console.log {data: Array(250), status: 200, statusText: "", headers: {…}, config: {…}, …} dat

我正在尝试使用countries API在这个迷你应用程序中实现一个搜索过滤器。但是,我知道错误
过滤器
不是一个函数

现在我认为这是因为数据必须是一个数组,才能使
filter()
工作。我不确定如何才能访问数据进行搜索

挣扎着让我的头围绕着这个

示例response.data from my console.log

{data: Array(250), status: 200, statusText: "", headers: {…}, config: {…}, …}
            data: Array(250)
                  [0 … 99]
               0:
            name: "Afghanistan"
  topLevelDomain: [".af"]
      alpha2Code: "AF"
      alpha3Code: "AFG"
    callingCodes: ["93"]
         capital: "Kabul"
    altSpellings: (2) ["AF", "Afġānistān"]
          region: "Asia"
       subregion: "Southern Asia"
      population: 27657145
          latlng: (2) [33, 65]
         demonym: "Afghan"
            area: 652230
            gini: 27.8
       timezones: ["UTC+04:30"]
这是我的过滤函数,它显示了错误

const Homepage = () => {
  const [countries, setCountries] = useState('');
  const [searchedCountry, setSearchedCountry] = useState('');

  useEffect(() => {
    console.log('effect');
    axios.get(`https://restcountries.eu/rest/v2/all`).then((response) => {
      console.log(response, 'promise fulfiled');
      setCountries(response.data);
    });
  }, []);

  const handleSearch = (event) => {
    setSearchedCountry(event.target.value);
  };

  // Filter function
  const filteredCountries = countries.filter((country) =>
   country.name.toLowerCase().includes(searchedCountry.toLowerCase())
  );

  return (
    <div className='homepage'>
      <input type='text' onChange={handleSearch} />
      <CountryList countries={countries} />
    </div>
  );
};
const主页=()=>{
const[countries,setCountries]=useState(“”);
const[searchedCountry,setSearchedCountry]=useState(“”);
useffect(()=>{
console.log(“效果”);
axios.get(`https://restcountries.eu/rest/v2/all`)。然后((响应)=>{
日志(响应“承诺履行”);
国家统计局(答复.数据);
});
}, []);
const handleSearch=(事件)=>{
setSearchedCountry(event.target.value);
};
//过滤函数
const filteredCountries=国家/地区。筛选器((国家/地区)=>
country.name.toLowerCase().includes(searchedCountry.toLowerCase())
);
返回(
);
};
如果能更多地了解这一点,那就太好了。
谢谢。

您的
国家的初始值是正确的。默认值使用相同的类型

const [countries, setCountries] = useState([]);