类型' { }‘不能赋值给类型'IntrinsicAttributes &{ }’

Question

我正在做React上的PluralSight入门课程，课程中的一个项目涉及构建一个允许用户输入GitHub用户名的web UI，应用程序会将相应的GitHub个人资料照片添加到应用程序的个人资料列表中。

课程都是用标准的js编写的，但我正在尝试使用TypeScript，因为我的公司用的就是它。我遇到了一个问题，我想要将钩子( setState )函数引用作为道具传递给子组件。

以下是父组件中的代码：

function App() {
  const classes = useStyles();
  const [profiles, setProfiles] = React.useState<GitHubData[]>([]);     // **** HOOK HERE

  return (
    <div>
      <Typography variant="h3" className={classes.title}>The Github Cards App</Typography>
      <Divider />
      <Form onSubmit={setProfiles} />          // **** ISSUE IS HERE ****
      <CardList profiles={profiles} />
    </div>
  );
}

我使用了一堆material-UI的东西，但最重要的部分是<Form onSubmit={setProfiles} />，它是给我提供错误的函数引用(在标题中指定)。

有关更多上下文，请参阅以下相关接口和组件定义：

interface GitHubData {
  name: string,
  avatar_url: string,
  company: string,
  location?: string
}

interface updaterFunction {
  updateProfiles: Dispatch<SetStateAction<GitHubData>>       // From suggestions online
  updateProfiles: (newProfile: GitHubData) => void           // (What I hoped would work)
}

const Form = (props: updaterFunction) => { ... }

完整错误如下：

Type '{ onSubmit: Dispatch<SetStateAction<GitHubData[]>>; }' is not assignable to type 'IntrinsicAttributes & updaterFunction'.

Property 'onSubmit' does not exist on type 'IntrinsicAttributes & updaterFunction'

我能做些什么来摆脱它呢？我在网上看到了一堆类似的错误，但提出的解决方案中没有一个对我有效。谢谢你的帮助！！

Answer 1

看起来问题在于您的接口应该使用onSubmit键而不是updateProfiles键

interface updaterFunction {
  onSubmit: ...  // try with the options you mentioned
}

这就是第二行似乎在您的错误消息中所表明的。

顺便说一下，在这里将您的接口重命名为类似于FormProps的名称是有意义的。