当从后端API获取数据时，是否需要React组件道具？

问题描述 投票：0回答：1

像其他应用程序一样，为了渲染我的React应用程序的特定部分，我希望从我的后端API中接收一个项目列表。我已经创建了一个典型的Card组件来显示每个项目的数据。这个Card组件有一个父组件，这个父组件对所有的项目都是通用的。它应该是这样的。

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

道具 headline和 image 是必需的，所以理论上，我应该总是从我的API接收它们。因此，我在我的组件中把这些道具设置为需要。

CardItem.propTypes = {
  headline: PropTypes.string.isRequired,
  image: PropTypes.string.isRequired,
}

我们都知道，随着我们的应用的发展，它总是会发生一些特殊的原因，即使这些道具是必需的，我也可能收到一个未定义的值。出于这个原因，我喜欢把我的组件做得防弹，即使这些道具是必需的，我也总是做一个条件渲染，以避免应用崩溃。

{headline && (
  <Component/>
)}

对于其他的组件，我只是在最上面检查道具是否存在，否则，我返回null。

if (!itemId) return null

在对我的组件进行单元测试的时候，我确保这个行为是经过测试的，所以如果我从API接收到任何未定义的vale，应用程序就不会崩溃。我已经意识到Jest因为这个原因一直警告我。

警告： Failed prop type: 在CardItem中，该道具标题被标记为需要，但其值未定义。

这让我怀疑我的方法是不是不对，所以我的疑问在这里。

  1. 我的方法是否正确，是否有办法在Jest上避免这些警告？
  2. 当从API接收数据时，是否应该永远不需要组件的道具？
  3. 而不是在组件子代中检查，如果道具不存在，父组件就不应该渲染子代？- 这个感觉根本就不是正确的，但我还是补充一下，以防万一是个有效的方法。

请不要因为我在检查道具的时候影响了你的回答，比如说 headline 或 image我知道对于这样的事情，我总是可以有条件的渲染。更多的是考虑到一个 itemId 或类似的，这些都是正确的渲染行为100%需要的道具。

reactjs unit-testing testing jestjs react-proptypes
1个回答
1
投票

在组件中，有一个选项 默认道具.

在这种情况下，你 得不到好处 的API。您可以 提供你自己的默认Props 的组件。

如果您使用的是 功能部件，它应该是这样的 以外

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

如果你使用的是 器件类，它将是这样的 课内

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

而这样做，你就不需要对道具进行验证。

0
投票

你看，可能有多种情况，1.子代完全依赖父代获取数据，在这种情况下，如果props是undefinednull，父代就不应该渲染子代，即子代的渲染应该是防弹的。在这种情况下，如果props是undefinednull的话，父代不应该渲染子代，也就是说渲染子代应该是防弹的。但是你想采取的方法来了，就像上面的回答中提到的，有defaultProps.但是如果你不想用它，那么你可以试试这样的方法。

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

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

现在当你测试这个组件时，Jest不会抱怨，你可以很容易地测试数值。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.