[英]Cannot read property 'map' of undefined" Error in React
I have this code here.我这里有这段代码。 I keep getting an error: Cannot convert undefined or null to object (or sometimes TypeError: Cannot read property 'map' of undefined.)
我不断收到错误消息:无法将未定义或 null 转换为 object(或有时 TypeError:无法读取未定义的属性“映射”。)
Here is my code这是我的代码
const AdresList = (props) => {
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
setIsLoading(true);
getXAddress()
.then((response) => {
const { data } = response || {};
setData(data);
setIsLoading(false);
})
.catch((error) => console.error(error));
}, []);
return (
<DashboardLayout>
{isLoading && (
<TableRow sx={{ my: "1rem", padding: "6px 18px" }}>
<Typography whiteSpace="pre" m={0.75} textAlign="left">
<Skeleton variant="text" />
</Typography>
<Typography flex="1 1 260px !important" m={0.75} textAlign="left">
<Skeleton variant="text" />
</Typography>
<Typography whiteSpace="pre" textAlign="right" color="grey.600">
<Skeleton variant="text" />
</Typography>
</TableRow>
)}
{data?.length > 0 &&
data.map((row) => (
<TableRow sx={{ my: "1rem", padding: "6px 18px" }} key={row.id}>
<Typography whiteSpace="pre" m={0.75} textAlign="left">
{row.attributes.name}
</Typography>
</TableRow>
))}
</DashboardLayout>
);
};
export default AdresList;
And the code of function以及function的代码
export const getXAddress = async () => {
const response = await apiClient.get("/adress");
return response.data;
};
I will be grateful for help.我将不胜感激。
There are a little issue in your code.您的代码中有一个小问题。
I saw that when the useEfect
make a request, you are handling the response in a wrong way when do this const { data } = response || {};
我看到当
useEfect
发出请求时,您在执行此操作时以错误的方式处理响应const { data } = response || {};
const { data } = response || {};
So if response
is undefined the code gives {}
(empty object).因此,如果未定义
response
,则代码给出{}
(空对象)。 And next, when this part: setData(data);
接下来,当这部分:
setData(data);
was runned, your array is replaced by undefined, resulting in problems like:运行时,您的数组被 undefined 替换,导致如下问题:
TypeError: Cannot read property 'map' of undefined.
TypeError:无法读取未定义的属性“地图”。
Do this:做这个:
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
setIsLoading(true);
getXAddress()
.then((response) => {
if (response) setData(response.data);
})
.catch((error) => console.error(error))
.finally(() => setIsLoading(false));
}, []);
Look that I move your setIsLoading(false)
to finally
, because if your Promise
dispatch a catch()
isLoading will be still true.看我把你的
setIsLoading(false)
移动到finally
,因为如果你的Promise
调度一个catch()
isLoading 仍然是真的。
And the last.最后一个。 Watch out with your
getXAddress
function.请注意您的
getXAddress
function。 Make sure that data
will pass away or will be returned only the value.确保
data
将消失或仅返回值。 Otherwise will result in:否则会导致:
Cannot read data from undefined
无法从 undefined 读取数据
export const getXAddress = async () => {
const response = await apiClient.get("/adress");
//Do this if you want to use de "response.data" at "then()"
return response;
//Or this if you want to use only "response" as result at "then()"
return response.data;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.