Reactjs 从后端API获取数据时是否需要React组件属性？

与任何其他应用程序一样，为了呈现我的React应用程序的特定部分，我希望从我的后端API接收一个项目列表。我创建了一个典型的卡片组件来显示每个项目的数据。此卡片组件有一个父组件，它对所有项目都是通用的。应该是这样的：

<ParentComponent>
 <CardItem headline image/>
</ParentComponent>

我们都知道，随着应用程序的发展，由于某些特定原因，即使需要这些道具，我也可能会收到一个未定义的值。出于这个原因，我喜欢让我的组件防弹，即使需要这些道具，我也会做有条件的渲染，以避免应用程序崩溃：

{headline && (
  <Component/>
)}

在对我的组件进行单元测试时，我确保对这种行为进行了测试，这样，如果我从API收到任何未定义的值，应用程序就不会崩溃。我意识到Jest一直在警告我，因为：

警告：失败的道具类型：道具标题标记为 CardItem中需要，但其值未定义

这让我怀疑我的方法是否正确，因此我怀疑：

我的方法正确吗？有没有办法避免这些开玩笑的警告？ 当从API接收数据时，是否永远不需要组件的道具？ 如果道具不存在，则父组件不应呈现子组件，而应检入组件子组件这一个感觉它根本不是正确的一个，但我添加它只是为了以防万一它是一个有效的方法。

---

请不要让你的回答受到我检查标题或图片等道具的影响，我知道这样的东西我总是可以有条件地呈现。更多地考虑itemId或类似的情况，它们是正确呈现/行为所需的100%道具。

在组件中，有一个defaultProps选项

在这种情况下，您没有收到来自API的道具。您可以为组件提供自己的defaultProps

如果您使用的是功能组件，那么在组件外部应该是这样的

如果您使用的是类组件，那么在类内部应该是这样的

---

通过这样做，您无需验证道具，可以看到多种场景， 1.子项完全依赖于父项获取数据。在这种情况下，如果道具未定义/null，则父级不应呈现子级。i、 e儿童的身体应该是防弹的。 2.如果子对象在某种意义上是独立的，这是有意义的，如果父对象不知何故不为其提供道具，并且它仍然可以使用一些默认值，那么您可以渲染子对象。但是这里是你想要采取的方法，正如上面的回答中提到的，这里有默认的道具。但如果你不想去，你可以试试这样的

interface ComponentProps {
prop1?: string;
prop2?: number;
}

export const Component:React.FC<ComponentProps>=({prop1='',prop2=0})=>{
return(
// logic goes here
)};

---

现在，当您测试此组件时，Jest不会抱怨，您可以轻松测试这些值。

感谢您的回复。我不能为itemId设置默认道具，这是我的观点谢谢你的回复。因此，对于一个名为itemId的道具，您建议设置一个空字符串作为默认值？这是一种好的做法吗？这同样取决于业务需求。但是，如果符合我们的要求，那么为道具提供默认值作为备用值是很好的。否则，正如我提到的，若我们不能用默认值显示组件，那个么父级将不会呈现子级。

CardItem.defaultProps = {
    headline: "YOUR_DEFAULT_VALUE",
    image: "YOUR_DEFAULT_VALUE",
}

static defaultProps = {
   headline: "YOUR_DEFAULT_VALUE",
   image: "YOUR_DEFAULT_VALUE",
}

interface ComponentProps {
prop1?: string;
prop2?: number;
}

export const Component:React.FC<ComponentProps>=({prop1='',prop2=0})=>{
return(
// logic goes here
)};