如何在 React TypeScript 中輸入 props ?我收到錯誤屬性“authors”在類型“[Props] & {children?: ReactNode; 上不存在” }'.ts。我期望傳遞一個由名稱和密碼鍵組成的陣列。
https://codesandbox.io/s/test-login-page-tasks-24-04-forked-eg91s5?file=/src/components/Login.tsx:229-274
type Props = { authors: { name: string; password: string; }[]; }; const Login: FC<[Props]> = ({ authors }) => { return ( ... ) }
,即使我正在傳遞道具。
P粉5503233382024-04-01 15:15:04
您使用 IUser 類型定義了 IUser 介面並定義了名稱、密碼狀態,這將導致問題,因為當您定義此時:
const [name, setName] = useState(""); // name will expected to be name = { name: 'name', password: 'password' }
這是錯誤的,因為名稱,密碼是一個字串,所以嘗試這樣定義它:
const [name, setName] = useState(""); const [password, setPassword] = useState ("");
然後您必須修復將作者傳遞給 FC 元件的問題:
const Login: FC// instead of <[Props]>
您必須修復此類型以匹配從 App.tsx 傳遞的資料類型的最後一件事:
type Props = { authors: { author_name: string; // instead of name password: string; }[]; }; // because you are passing and comparing here with author_name not with name const userData = authors.find( (user) => user.author_name === name && user.password === password );
並且您像這樣從應用程式傳遞了它:
const Authors = [ { id: "001", author_name: "John Smith", // not a name password: "123" } ];
P粉9030525562024-04-01 12:59:05
嘗試將 [Props]
更改為 Props
,如下所示
const Login: FC= ({ authors }) => { ... }
現在它可以工作了,因為它需要物件而不是數組,我們將傳遞一個像 <Loginauthors={authors} />
這樣的物件。現在,作者將是一個物件數組。