在 React TypeScript 中发送道具时出错答案

【问题标题】：Giving error when sending props in react typescript在 React TypeScript 中发送道具时出错
【发布时间】：2022-11-12 18:53:06
【问题描述】：

我正在尝试向我的另一个组件发送一些道具，但它给出了这个错误：

【问题讨论】：

请给一个minimal reproducible example，不要发帖图片的文本.
您的问题中需要包含相关代码和错误消息作为文本，not as pictures of text。仅链接到屏幕截图会使人们更难帮助您。要了解有关此社区的更多信息以及我们如何为您提供帮助，请从 tour 开始并阅读 How to Ask 及其链接资源。
此外，该错误意味着<AddToCart> 组件不期望这个book 属性。我们对这个组件一无所知。

标签： reactjs react-props react-typescript

【解决方案1】：

我假设您没有正确声明 AddToCart 的道具（不是双关语）。

您的代码应如下所示：

type Book = {
  title: string;
  author: string;
  description: string;
};

type CartProps = {
  book: Book;
};

const AddToCart = ({ book }: CartProps) => {
  return (
    <div>
      <h1>{book.title}</h1>
      <h2>{book.author}</h2>
      <p>{book.description}</p>
    </div>
  );
};

export default function App() {
  const book = {
    title: "Some Title",
    author: "John Smith",
    description: "Book description."
  };

  return <AddToCart book={book} />;
}

这是一个有效的codesandbox。

另外：为方法/函数保留“动词”名称，而不是组件。组件名称应该代表“实体”（大多数情况下，例如：购物车），而不是“动作”（例如：AddToCart）。

【讨论】：

我们可以直接使用 write this { book }: Book 为什么要写 this { book }: CartProps
@ZebraCoder 如果我理解，您是在问为什么包含 book 的对象设置为 CartProps 而不是 Book？因为 { book } 的类型是 Book 是不正确的；它是一个包含 Book 对象的对象。括号中的对象“book”不是 CartProps 类型控制的对象； book 只是 AddToCart 可能使用的众多道具之一（例如：{ book, ASIN, timestamp }）。这个例子是假设一个通用的购物车系统编写的；就像在 CartProps 中包含更多键一样。
@ZebraCoder，您可以在上面的答案代码框中尝试一下以进行澄清。如果您尝试将其设置为 Book，它将因此引发输入错误。