我練習創建一個下拉選單
- 在嘗試創建一個之前硬編碼的陣列
- 帶有使用 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>
))}
當游標放在tagandid引數上時，我得到了引數的紅色下劃線，該引數表示以下內容。
引數 'tag' 隱含一個 'any' 型別.ts(7006)
我單擊了建議的快速修復，現在 MenuItem 及其道具都帶有下劃線。
快速修復后它看起來像這樣
{arr.map((tag: {} | null | undefined,id: React.Key | null | undefined)=> (
<MenuItem
key={id}
value={tag}
>
{tag}
</MenuItem>
))}
我將滑鼠懸停在紅色下劃線上得到的資訊是
沒有多載匹配此呼叫。多載 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',給出了以下錯誤。輸入'{孩子：{} | 空 | 不明確的; 鍵：鍵 | 空 | 不明確的; 值：{} | 空 | 不明確的; }' 不能分配給型別 'IntrinsicAttributes & { href: string; } & { 自動對焦？：布林值 | 不明確的; 類？：部分 | 不明確的; 密集？：布林值 | 不明確的; ... 4 更多 ...; sx?: SxProps<...> | 不明確的; } & 省略<...> & CommonProps & 省略<... >'。型別'IntrinsicAttributes & { href: string; 上不存在屬性'值' } & { 自動對焦？：布林值 | 不明確的; 類？：部分 | 不明確的; 密集？：布林值 | 不明確的; ... 4 更多 ...; sx?: SxProps<...> | 不明確的; } & 省略<...> & CommonProps & 省略<...>'。多載 2 of 3, '(props: { component: ElementType; } & { autoFocus?: boolean | undefined; classes?: Partial | undefined; dense?: boolean | undefined; ... 4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>): Element'，出現以下錯誤。型別 '{ children: {} | 中缺少屬性 'component' 空 | 不明確的; 鍵：鍵 | 空 | 不明確的; 值：{} | 空 | 不明確的; }' 但在型別 '{ component: ElementType; }'。多載 3 個，共 3 個，'(props: DefaultComponentProps<ExtendButtonBaseTypeMap<MenuItemTypeMap<{}, "li">>>): Element'，給出了以下錯誤。輸入'{} | 空 | undefined' 不可分配給型別 'string | 號碼 | 只讀字串[] | 不明確的'。型別 'null' 不能分配給型別 'string | 號碼 | 只讀字串[] | undefined'.ts(2769) OverridableComponent.d.ts(17, 7): 'component' 在這里宣告。index.d.ts(2246, 9)：預期型別來自屬性“值”，該屬性在此處宣告型別為“IntrinsicAttributes & { autoFocus?: boolean | 不明確的; 類？：部分 | 不明確的; 密集？：布林值 | 不明確的; ... 4 更多 ...; sx?: SxProps<...> | 不明確的; } & 省略<...> & CommonProps & 省略<...>' 多載 3 個，共 3 個，'(props: DefaultComponentProps<ExtendButtonBaseTypeMap<MenuItemTypeMap<{}, "li">>>): Element'，給出了以下錯誤。輸入'{} | 空 | undefined' 不可分配給型別 'string | 號碼 | 只讀字串[] | 不明確的'。型別 'null' 不能分配給型別 'string | 號碼 | 只讀字串[] | undefined'.ts(2769) OverridableComponent.d.ts(17, 7): 'component' 在這里宣告。index.d.ts(2246, 9)：預期型別來自屬性“值”，該屬性在此處宣告型別為“IntrinsicAttributes & { autoFocus?: boolean | 不明確的; 類？：部分 | 不明確的; 密集？：布林值 | 不明確的; ... 4 更多 ...; sx?: SxProps<...> | 不明確的; } & 省略<...> & CommonProps & 省略<...>' 多載 3 個，共 3 個，'(props: DefaultComponentProps<ExtendButtonBaseTypeMap<MenuItemTypeMap<{}, "li">>>): Element'，給出了以下錯誤。輸入'{} | 空 | undefined' 不可分配給型別 'string | 號碼 | 只讀字串[] | 不明確的'。型別 'null' 不能分配給型別 'string | 號碼 | 只讀字串[] | undefined'.ts(2769) OverridableComponent.d.ts(17, 7): 'component' 在這里宣告。index.d.ts(2246, 9)：預期型別來自屬性“值”，該屬性在此處宣告型別為“IntrinsicAttributes & { autoFocus?: boolean | 不明確的; 類？：部分 | 不明確的; 密集？：布林值 | 不明確的; ... 4 更多 ...; sx?: SxProps<...> | 不明確的; } & 省略<...> & CommonProps & 省略<...>' DefaultComponentProps<ExtendButtonBaseTypeMap<MenuItemTypeMap<{}, "li">>>): Element'，給出了以下錯誤。輸入'{} | 空 | undefined' 不可分配給型別 'string | 號碼 | 只讀字串[] | 不明確的'。型別 'null' 不能分配給型別 'string | 號碼 | 只讀字串[] | undefined'.ts(2769) OverridableComponent.d.ts(17, 7): 'component' 在這里宣告。index.d.ts(2246, 9)：預期型別來自屬性“值”，該屬性在此處宣告型別為“IntrinsicAttributes & { autoFocus?: boolean | 不明確的; 類？：部分 | 不明確的; 密集？：布林值 | 不明確的; ... 4 更多 ...; sx?: SxProps<...> | 不明確的; } & 省略<...> & CommonProps & 省略<...>' DefaultComponentProps<ExtendButtonBaseTypeMap<MenuItemTypeMap<{}, "li">>>): Element'，給出了以下錯誤。輸入'{} | 空 | undefined' 不可分配給型別 'string | 號碼 | 只讀字串[] | 不明確的'。型別 'null' 不能分配給型別 'string | 號碼 | 只讀字串[] | undefined'.ts(2769) OverridableComponent.d.ts(17, 7): 'component' 在這里宣告。index.d.ts(2246, 9)：預期型別來自屬性“值”，該屬性在此處宣告型別為“IntrinsicAttributes & { autoFocus?: boolean | 不明確的; 類？：部分 | 不明確的; 密集？：布林值 | 不明確的; ... 4 更多 ...; sx?: SxProps<...> | 不明確的; } & 省略<...> & CommonProps & 省略<...>' MenuItemTypeMap<{}, "li">>>): Element'，出現以下錯誤。輸入'{} | 空 | undefined' 不可分配給型別 'string | 號碼 | 只讀字串[] | 不明確的'。型別 'null' 不能分配給型別 'string | 號碼 | 只讀字串[] | undefined'.ts(2769) OverridableComponent.d.ts(17, 7): 'component' 在這里宣告。index.d.ts(2246, 9)：預期型別來自屬性“值”，該屬性在此處宣告型別為“IntrinsicAttributes & { autoFocus?: boolean | 不明確的; 類？：部分 | 不明確的; 密集？：布林值 | 不明確的; ... 4 更多 ...; sx?: SxProps<...> | 不明確的; } & 省略<...> & CommonProps & 省略<...>' MenuItemTypeMap<{}, "li">>>): Element'，出現以下錯誤。輸入'{} | 空 | undefined' 不可分配給型別 'string | 號碼 | 只讀字串[] | 不明確的'。型別 'null' 不能分配給型別 'string | 號碼 | 只讀字串[] | undefined'.ts(2769) OverridableComponent.d.ts(17, 7): 'component' 在這里宣告。index.d.ts(2246, 9)：預期型別來自屬性“值”，該屬性在此處宣告型別為“IntrinsicAttributes & { autoFocus?: boolean | 不明確的; 類？：部分 | 不明確的; 密集？：布林值 | 不明確的; ... 4 更多 ...; sx?: SxProps<...> | 不明確的; } & 省略<...> & CommonProps & 省略<...>' {} | 空 | undefined' 不可分配給型別 'string | 號碼 | 只讀字串[] | 不明確的'。型別 'null' 不能分配給型別 'string | 號碼 | 只讀字串[] | undefined'.ts(2769) OverridableComponent.d.ts(17, 7): 'component' 在這里宣告。index.d.ts(2246, 9)：預期型別來自屬性“值”，該屬性在此處宣告型別為“IntrinsicAttributes & { autoFocus?: boolean | 不明確的; 類？：部分 | 不明確的; 密集？：布林值 | 不明確的; ... 4 更多 ...; sx?: SxProps<...> | 不明確的; } & 省略<...> & CommonProps & 省略<...>' {} | 空 | undefined' 不可分配給型別 'string | 號碼 | 只讀字串[] | 不明確的'。型別 'null' 不能分配給型別 'string | 號碼 | 只讀字串[] | undefined'.ts(2769) OverridableComponent.d.ts(17, 7): 'component' 在這里宣告。index.d.ts(2246, 9)：預期型別來自屬性“值”，該屬性在此處宣告型別為“IntrinsicAttributes & { autoFocus?: boolean | 不明確的; 類？：部分 | 不明確的; 密集？：布林值 | 不明確的; ... 4 更多 ...; sx?: SxProps<...> | 不明確的; } & 省略<...> & CommonProps & 省略<...>' ts(2769) OverridableComponent.d.ts(17, 7): 'component' 在這里宣告。index.d.ts(2246, 9)：預期型別來自屬性“值”，該屬性在此處宣告型別為“IntrinsicAttributes & { autoFocus?: boolean | 不明確的; 類？：部分 | 不明確的; 密集？：布林值 | 不明確的; ... 4 更多 ...; sx?: SxProps<...> | 不明確的; } & 省略<...> & CommonProps & 省略<...>' ts(2769) OverridableComponent.d.ts(17, 7): 'component' 在這里宣告。index.d.ts(2246, 9)：預期型別來自屬性“值”，該屬性在此處宣告型別為“IntrinsicAttributes & { autoFocus?: boolean | 不明確的; 類？：部分 | 不明確的; 密集？：布林值 | 不明確的; ... 4 更多 ...; sx?: SxProps<...> | 不明確的; } & 省略<...> & CommonProps & 省略<...>'
通過硬編碼陣列映射和使用 useSRW 獲取的陣列有什么區別？第一個示例中沒有紅色下劃線。
該代碼有效，但我試圖了解 Typescript 是如何作業的。我還在控制臺中收到此警告訊息：
react-dom.development.js:67 警告：組件正在更改要控制的不受控制的輸入。這可能是由于值從未定義更改為已定義值引起的，這不應該發生。決定在組件的生命周期內使用受控輸入元素還是不受控輸入元素。
uj5u.com熱心網友回復：
沙盒中列出的陣列是string. 因此映射單個元素應該給出一個字串。希望這可以幫助。
{arr.map((tag:string,id:number)=> (
<MenuItem
key={id}
value={tag}
>
{tag}
</MenuItem>
))}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/472191.html