Javascript TypeError:无法读取属性'；国家'；未定义的。为什么一个对象数组不能被识别和过滤？

我正在从API获取一个对象https://api.covid19api.com/summary'). 此对象具有 钥匙 具有对象数组的国家和我需要筛选的对象数组

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

TypeError:无法读取未定义的属性“Countries”

为什么一个对象数组不能被识别和过滤？ 在另一个文件中，map方法迭代相同的写入数据.Countries，没有错误

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>
    )
}

const Home=（）=>{
const[data，setData]=useState（）；
常量[searchfield，setSearchfield]=useState（“”）
useffect（（）=>{
const fetch=async（）=>{
试一试{
const res=等待axios.get（'https://api.covid19api.com/summary');
setData（res.data）；
}捕获（错误）{
console.log（错误）；
}
};
fetch（）；
}, []);
const onSearchChange=（事件）=>{
setSearchfield（事件目标值）
}
const filteredData=data.Countries.filter（dat=>{
返回dat.Country.toLowerCase（）.includes（searchfield.toLowerCase（））；
})   
返回(
{/*
全球大流行危机图
*/}
{/**/}
)
}

您需要在axios响应的回调中过滤数据，否则它将“未定义”，因为它尚未完成获取

让filteredData=useRef（null）；
useffect（（）=>{
if（数据类型！=“未定义”）
filteredData.current=data.Countries.filter（（dat）=>{
返回dat.Country.toLowerCase（）.includes（searchfield.toLowerCase（））；
});
}，[数据]；
const fetch=async（）=>{
const res=等待axios
.get（“https://api.covid19api.com/summary")
。然后（（响应）=>{
//response.data不应在此处“未定义”。
setData（response.data）；
})
.catch（（错误）=>{
//错误回退工具
控制台错误（error）；
});
};
如果（！filteredData.current）fetch（）；

在以后的代码中，您可以检查它是否已定义

返回(
{filteredData.current！==null&&
filteredData.current.map（（CountryMap，i）=>
{CountryMap.Country}
)
}
);

当您从api获取数据时，如果数据尚未加载，则在向数组应用任何高阶函数时，需要使用可选链接

？

。比如说

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

问题 初始

数据

状态未定义，因此在初始渲染中未定义

数据.Countries

const [data, setData] = useState();

解决方案 提供有效的初始状态并防止以后出现错误更新（如果发生）

---

这不起作用，因为React状态更新是异步的，

数据

不是您认为的值。谢谢。类和函数组件之间的差异仍然在回调中抛出meCan't call React钩子，这打破了传统。我修复了答案，感谢反馈。

const [data, setData] = useState({ Countries: [] });

...

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