Wie gebe ich Requisiten in React Typescript ein?

Question

Wie gebe ich Requisiten in ReactTypeScript ein? Ich erhalte die Fehlermeldung, dass die Eigenschaft „Autoren“ für den Typ „[Props]&{children?:ReactNode;‘}‘.ts nicht vorhanden ist.“ Ich erwarte, dass mir ein Array übergeben wird, das aus Namens- und Passwortschlüsseln besteht. https://codesandbox.io/s/test-login-page-tasks-24-04-forked-eg91s5?file=/src/components/L

P粉550323338 · Answer

您使用 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

您必须修复此类型以匹配从 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粉903052556 · Answer

尝试将 [Props] 更改为 Props，如下所示

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

现在它可以工作了，因为它需要对象而不是数组，我们将传递一个像这样的对象。现在，作者将是一个对象数组。