打字稿 - 'No overload matches this call' 使用获取的数据和 material-ui

Question

我练习用

创建下拉菜单

硬编码数组，然后尝试创建
带有使用 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.

Answer 1

沙盒中列出的数组是string的数组。因此映射单个元素应该给出一个字符串。希望这有帮助。

{arr.map((tag:string,id:number)=> (
     <MenuItem
          key={id}
          value={tag}
     >
        {tag}
     </MenuItem>
))}

打字稿 - 'No overload matches this call' 使用获取的数据和 material-ui

Typescript - 'No overload matches this call' when using fetched data and material-ui

reactjs

typescript

dom

material-ui

object-literal