我需要一些帮助来理解为什么我从标题中得到错误：'TypeError：无法读取未定义的属性'map'。我需要在页面上（例如此处的州和国家）呈现API的一些数据，但是由于某些原因无法正常工作。
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const APIFetch = () => {
const [user, setUser] = useState('');
const [info, setInfo] = useState([]);
const fetchData = async () => {
const data = await axios.get('https://randomuser.me/api');
return JSON.stringify(data);
}
useEffect(() => {
fetchData().then((res) => {
setUser(res)
setInfo(res.results);
})
}, [])
const getName = user => {
const { state, country } = user;
return `${state} ${country}`
}
return (
<div>
{info.map((info, id) => {
return <div key={id}>{getName(info)}</div>
})}
</div>
)
}
你们能帮我些忙吗？谢谢。
试试这个方法
const APIFetch = () => {
const [user, setUser] = useState("");
const [info, setInfo] = useState([]);
const fetchData = async () => {
const data = await axios.get("https://randomuser.me/api");
return data; <--- Heres is the first mistake
};
useEffect(() => {
fetchData().then((res) => {
setUser(res);
setInfo(res.data.results);
});
}, []);
const getName = (user) => {
const { state, country } = user.location; <--- Access location from the user
return `${state} ${country}`;
};
return (
<div>
{info.map((info, id) => {
return <div key={id}>{getName(info)}</div>;
})}
</div>
);
};
data不带字符串化fetchData。user.location内部getName。基本代码-https://codesandbox.io/s/sharp-hawking-6v858?file=/src/App.js
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句