[英]× TypeError: Cannot read properties of undefined (reading 'map') in reactjs
hey guys i don't understand why am I getting this error when i want get api from api.Covid19 and it return a object that contain Countries array whenever i want map over Countries i get this error and if i get Countries api separately it work find:| hey guys i don't understand why am I getting this error when i want get api from api.Covid19 and it return a object that contain Countries array whenever i want map over Countries i get this error and if i get Countries api separately it work查找:| help me pls enter image description here请帮我在这里输入图片描述
looping over data.Countries (this is problem section)循环 data.Countries (这是问题部分)
and the image below shows what api returns: object return by api下图显示了 api 返回的内容: object 返回 api
The initial data
state is an object with no defined Countries
property, so in the component data.countries
is undefined and throws error when you attempt to map it.初始data
state 是一个 object 没有定义的Countries
属性,所以在组件中data.countries
是未定义的,当你尝试 map 时会抛出错误。
The https://api.covid19api.com/summary
endpoint does return an object with a Countries
property. https://api.covid19api.com/summary
端点确实返回了一个带有 Country 属性的Countries
。
/ 20211121231605 // https://api.covid19api.com/summary { "ID": "03b65afe-02ad-4835-abb5-9916c44bae85", "Message": "", "Global": { "NewConfirmed": 408370, "TotalConfirmed": 256947981, "NewDeaths": 5200, "TotalDeaths": 5144527, "NewRecovered": 0, "TotalRecovered": 0, "Date": "2021-11-22T06:09:08.91Z" }, "Countries": [ { "ID": "19a0f201-0385-42ee-bfec-cfe99666a87c", "Country": "Afghanistan", "CountryCode": "AF", "Slug": "afghanistan", "NewConfirmed": 32, "TotalConfirmed": 156896, "NewDeaths": 2, "TotalDeaths": 7365, "NewRecovered": 0, "TotalRecovered": 0, "Date": "2021-11-22T06:09:08.91Z", "Premium": { } }, ...
The solution seems to be to provide valid initial state in the provider for what you expect all consumers to render from:解决方案似乎是在提供程序中提供有效的初始 state 以供您期望所有消费者从中呈现:
const [data, setData] = useState({ Countries: [] });
Or just use null/checks/guard-clauses or Optional Chaining operator to protect against the null/undefined accesses.或者只使用 null/checks/guard-clauses 或 Optional Chaining 运算符来防止 null/undefined 访问。
data.Countries && data.Countries.map(country => (
<h2 key={country.ISO2}>
{country.Country}
</h2>
))
... ...
data.Countries?.map(country => (
<h2 key={country.ISO2}>
{country.Country}
</h2>
))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.