映射数组错误

Question

我正在创建一个列表，但它给了我相同的错误。.map函数不能在我的变量上工作，所以你们能帮我吗?

它是在Typescript React中创建的。我试着让这个工作了一个星期，仍然找不到问题我甚至尝试重写孔系统，但仍然没有工作，所以这是我最后的希望。

误差

react-dom.development.js?e444:25163 Uncaught TypeError: Cannot read property 'map' of undefined
at _default (CloudServersContainer.tsx?a799:46)
at renderWithHooks (react-dom.development.js?e444:16240)
at mountIndeterminateComponent (react-dom.development.js?e444:18774)
at beginWork$1 (react-dom.development.js?e444:20136)
at HTMLUnknownElement.callCallback (react-dom.development.js?e444:337)
at Object.invokeGuardedCallbackDev (react-dom.development.js?e444:386)
at invokeGuardedCallback (react-dom.development.js?e444:441)
at beginWork$$1 (react-dom.development.js?e444:25737)
at performUnitOfWork (react-dom.development.js?e444:24664)
at workLoopSync (react-dom.development.js?e444:24637)

执行eggs。data时得到的Json

链接到图片:https://i.stack.imgur.com/CKC0Y.png

代码:

import React, { componentDidMount, useEffect, useState } from 'react';
import PageContentBlock from '@/components/elements/PageContentBlock';
import Button from '@/components/elements/Button';
import Input from '@/components/elements/Input';
import InputSpinner from '@/components/elements/InputSpinner';
import tw from 'twin.macro';
import useSWR from 'swr';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import { Textarea } from '@/components/elements/Input';
export default () => {
const [loading, setLoading] = useState(false);
interface EggsPlace {
Egg: String;
run(arg: any): void;
}
const [Eggs, setEggs] = useState<EggsPlace>([]);
const getEggs = async () => {
const response = await fetch('/api/client/cloudservers/getoptions');
if (response.status !== 400) {
const content = await response.json();
const data = content;
setEggs({ data });
}
};
useEffect(() => {
getEggs();
}, []);
if (typeof Eggs.data !== 'undefined') {
console.log(Eggs.data[0]);
}

return (
<PageContentBlock title={'Options'} showFlashKey={'options'}>
<h1>Server Types:</h1>
<div css={tw`w-full grid grid-flow-col grid-rows-2 grid-cols-3 gap-4`}>
{
Eggs.data !== 'undefined' ?
Eggs.data.map(item => (
console.log(item)
))
:
<p>loading</p>
}
</div>
<TitledGreyBox title="Configuration" css={tw`flex-wrap md:flex-no-wrap`}>
<div css={tw`w-full grid grid-flow-col grid-rows-2 grid-cols-2 gap-4`}>
<div css={tw`w-full col-span-2`}>
<InputSpinner visible={loading}>
<Input
readOnly={false}
name={"Name"}
placeholder={"Name Server"}
/>
</InputSpinner>
</div>
<InputSpinner visible={loading}>
<Input
readOnly={false}
name={"Memory"}
placeholder={"Memory"}
/>
</InputSpinner>
<InputSpinner visible={loading}>
<Input
readOnly={false}
name={"Disk"}
placeholder={"Disk"}
/>
</InputSpinner>
</div>
<div css={tw`mt-4 w-full`}>
<Textarea
placeholder={'Description'}
/>
</div>
</TitledGreyBox>
<Button css={tw`mt-4`} color="primary">Create Server</Button>
</PageContentBlock>
);
};

Answer 1

我认为问题就在这里:

Eggs.data !== 'undefined'

这是与字符串'undefined'进行比较。

您想要的是Eggs.data !== undefined或!Eggs.data或typeof Eggs.data !== 'undefined'

另外，我认为你有一些TypeScript问题，

setEggs({ data });

然后你应该像这样初始化Eggs

const [Eggs, setEggs] = useState<{data: EggsPlace[]}>({data: []});

这也将确保您初始化的数据与一个空数组。虽然，如果setEggs({ data });中的data不是数组，它仍然会中断。

Answer 2

当你得到Eggs.data尝试:

JSON.parse(JSON.stringify(Eggs.data))

对数组

进行深度复制。

Answer 3

我发现为什么它不工作，它只是我使用'未定义'而不是未定义。谢谢大家!