搜尋

首頁  >  問答  >  主體

如何在反應打字稿中輸入道具?

如何在 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粉897881626P粉897881626226 天前324

全部回覆(2)我來回復

  • P粉550323338

    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"
       }
     ];

    回覆
    0
  • P粉903052556

    P粉9030525562024-04-01 12:59:05

    嘗試將 [Props] 更改為 Props,如下所示

    const Login: FC = ({ authors }) => { ... }

    現在它可以工作了,因為它需要物件而不是數組,我們將傳遞一個像 <Loginauthors={authors} /> 這樣的物件。現在,作者將是一個物件數組。

    回覆
    0
  • 取消回覆