打字稿 - 'No overload matches this call' 使用获取的数据和 material-ui
Typescript - 'No overload matches this call' when using fetched data and material-ui
我练习用
创建下拉菜单
- 硬编码数组,然后尝试创建
- 带有使用 useSWR 检索的数组的下拉菜单。
我第一次练习用这个:https://codesandbox.io/s/76k0ft?file=/demo.tsx:1819-2045
我没有使用硬编码的 names
变量,而是保存了一个获取的数组,如下所示:
const { data, error } = useSWR(
"https://api.github.com/repos/vercel/swr",
fetcher
);
if (error) return <h1>"An error has occurred."</h1>;
if (!data) return <h1>"Loading..."</h1>;
const arr = data.topics;
我把它渲染成如图所示:
{arr.map((tag,id)=> (
<MenuItem
key={id}
value={tag}
>
{tag}
</MenuItem>
))}
当光标放在 tag
和 id
参数上时,我得到了参数的红色下划线,表示以下内容。
Parameter 'tag' implicitly has an 'any' type.ts(7006)
我点击了建议的快速修复,现在 MenuItem 及其道具带有下划线。
快速修复后看起来像这样
{arr.map((tag: {} | null | undefined,id: React.Key | null | undefined)=> (
<MenuItem
key={id}
value={tag}
>
{tag}
</MenuItem>
))}
我将鼠标悬停在红色下划线上方得到的消息是
No overload matches this call. Overload 1 of 3, '(props: { href:
string; } & { autoFocus?: boolean | undefined; classes?:
Partial | undefined; dense?: boolean | undefined;
disabled?: boolean | undefined; disableGutters?: boolean | undefined;
divider?: boolean | undefined; selected?: boolean | undefined; sx?:
SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>):
Element', gave the following error.
Type '{ children: {} | null | undefined; key: Key | null | undefined; value: {} | null | undefined; }' is not assignable to type
'IntrinsicAttributes & { href: string; } & { autoFocus?: boolean |
undefined; classes?: Partial | undefined; dense?:
boolean | undefined; ... 4 more ...; sx?: SxProps<...> | undefined; }
& Omit<...> & CommonProps & Omit<...>'.
Property 'value' does not exist on type 'IntrinsicAttributes & { href: string; } & { autoFocus?: boolean | undefined; classes?:
Partial | undefined; dense?: boolean | undefined; ...
4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps
& Omit<...>'. Overload 2 of 3, '(props: { component:
ElementType; } & { autoFocus?: boolean | undefined; classes?:
Partial | undefined; dense?: boolean | undefined; ...
4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps
& Omit<...>): Element', gave the following error.
Property 'component' is missing in type '{ children: {} | null | undefined; key: Key | null | undefined; value: {} | null | undefined;
}' but required in type '{ component: ElementType; }'. Overload
3 of 3, '(props:
DefaultComponentProps<ExtendButtonBaseTypeMap<MenuItemTypeMap<{},
"li">>>): Element', gave the following error.
Type '{} | null | undefined' is not assignable to type 'string | number | readonly string[] | undefined'.
Type 'null' is not assignable to type 'string | number | readonly string[] | undefined'.ts(2769) OverridableComponent.d.ts(17,
7): 'component' is declared here. index.d.ts(2246, 9): The expected
type comes from property 'value' which is declared here on type
'IntrinsicAttributes & { autoFocus?: boolean | undefined; classes?:
Partial | undefined; dense?: boolean | undefined; ...
4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps
& Omit<...>'
通过硬编码数组映射和使用 useSRW 获取数组有什么区别?第一个示例中没有红色下划线。
代码有效,但我想了解 Typescript 的工作原理。我还在控制台中收到此警告消息:
react-dom.development.js:67 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.
沙盒中列出的数组是string
的数组。因此映射单个元素应该给出一个字符串。希望这有帮助。
{arr.map((tag:string,id:number)=> (
<MenuItem
key={id}
value={tag}
>
{tag}
</MenuItem>
))}
我练习用
创建下拉菜单- 硬编码数组,然后尝试创建
- 带有使用 useSWR 检索的数组的下拉菜单。
我第一次练习用这个:https://codesandbox.io/s/76k0ft?file=/demo.tsx:1819-2045
我没有使用硬编码的 names
变量,而是保存了一个获取的数组,如下所示:
const { data, error } = useSWR(
"https://api.github.com/repos/vercel/swr",
fetcher
);
if (error) return <h1>"An error has occurred."</h1>;
if (!data) return <h1>"Loading..."</h1>;
const arr = data.topics;
我把它渲染成如图所示:
{arr.map((tag,id)=> (
<MenuItem
key={id}
value={tag}
>
{tag}
</MenuItem>
))}
当光标放在 tag
和 id
参数上时,我得到了参数的红色下划线,表示以下内容。
Parameter 'tag' implicitly has an 'any' type.ts(7006)
我点击了建议的快速修复,现在 MenuItem 及其道具带有下划线。
快速修复后看起来像这样
{arr.map((tag: {} | null | undefined,id: React.Key | null | undefined)=> (
<MenuItem
key={id}
value={tag}
>
{tag}
</MenuItem>
))}
我将鼠标悬停在红色下划线上方得到的消息是
No overload matches this call. Overload 1 of 3, '(props: { href: string; } & { autoFocus?: boolean | undefined; classes?: Partial | undefined; dense?: boolean | undefined; disabled?: boolean | undefined; disableGutters?: boolean | undefined; divider?: boolean | undefined; selected?: boolean | undefined; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>): Element', gave the following error. Type '{ children: {} | null | undefined; key: Key | null | undefined; value: {} | null | undefined; }' is not assignable to type 'IntrinsicAttributes & { href: string; } & { autoFocus?: boolean | undefined; classes?: Partial | undefined; dense?: boolean | undefined; ... 4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>'. Property 'value' does not exist on type 'IntrinsicAttributes & { href: string; } & { autoFocus?: boolean | undefined; classes?: Partial | undefined; dense?: boolean | undefined; ... 4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>'. Overload 2 of 3, '(props: { component: ElementType; } & { autoFocus?: boolean | undefined; classes?: Partial | undefined; dense?: boolean | undefined; ... 4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>): Element', gave the following error. Property 'component' is missing in type '{ children: {} | null | undefined; key: Key | null | undefined; value: {} | null | undefined; }' but required in type '{ component: ElementType; }'. Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<MenuItemTypeMap<{}, "li">>>): Element', gave the following error. Type '{} | null | undefined' is not assignable to type 'string | number | readonly string[] | undefined'. Type 'null' is not assignable to type 'string | number | readonly string[] | undefined'.ts(2769) OverridableComponent.d.ts(17, 7): 'component' is declared here. index.d.ts(2246, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & { autoFocus?: boolean | undefined; classes?: Partial | undefined; dense?: boolean | undefined; ... 4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>'
通过硬编码数组映射和使用 useSRW 获取数组有什么区别?第一个示例中没有红色下划线。
代码有效,但我想了解 Typescript 的工作原理。我还在控制台中收到此警告消息:
react-dom.development.js:67 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.
沙盒中列出的数组是string
的数组。因此映射单个元素应该给出一个字符串。希望这有帮助。
{arr.map((tag:string,id:number)=> (
<MenuItem
key={id}
value={tag}
>
{tag}
</MenuItem>
))}