PropTypes形状被标记为必需

Lor*_*eiß 8 javascript reactjs react-redux react-proptypes

所以我试图为我的组件对象添加一个形状.对象从服务器加载,因此从一开始就不存在.但是当我将形状添加到Proptypes时.它不断抛出标记为必需的错误,但事实并非如此.

shapeobjectOf自动添加isRequired值?

TopicsList.propTypes = {
  topicsObject: PropTypes.shape(reportsTopicsObjectResultShape),
};
Run Code Online (Sandbox Code Playgroud)

形状:

export const reportsTopicObject = PropTypes.shape({
 avg_rating_ord: PropTypes.number,
 cards_with_comments: PropTypes.number,
 cards_without_comments: PropTypes.number,
 number_of_questions: PropTypes.number,
 rating_count: PropTypes.number,
 scale_version_id: PropTypes.string,
 scale_id: PropTypes.string,
 last_answered_at: PropTypes.string,
 id: PropTypes.string,
 type: PropTypes.string,
 name: PropTypes.shape(translatedObjectSystem),
 description: PropTypes.shape(translatedObjectSystem)
});

export const reportsTopicsObjectResultShape = PropTypes.shape({
 topics_distribution: PropTypes.shape({
    general: PropTypes.number,
    groups: PropTypes.number,
    people: PropTypes.number
}),
 topic_list: PropTypes.objectOf(reportsTopicObject)
});
Run Code Online (Sandbox Code Playgroud)

我仍然得到错误

Failed prop type: The prop `topicsObject.isRequired` is marked as 
required in `TopicsList`, but its value is `undefined`.
Run Code Online (Sandbox Code Playgroud)

确实在开头是未定义的,但是我不希望它被要求

Ada*_*man 6

默认情况下,shape 和 objectOf 都不会导致 prop 成为必需的。这是直接来自反应文档的示例:

// An object with property values of a certain type
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

// An object taking on a particular shape
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),
Run Code Online (Sandbox Code Playgroud)

这是一个示例,如果您希望使用 shape 的显示不会使对象成为必需的(尽管最后使用 .isRequired 会产生警告),则可以使用此示例。

值得注意的一件事是您的错误消息看起来有点奇怪。通常错误信息如下所示:

"Warning: Failed prop type: The prop `foo` is marked as required in `App`, but its value is `undefined`.
in App"
Run Code Online (Sandbox Code Playgroud)

道具显示为foonot 的地方foo.isRequired。你的似乎在说

prop `topicsObject.isRequired` 
Run Code Online (Sandbox Code Playgroud)

所以它可能与形状的导入/导出方式有关。

  • 发现我自己的错误。我对进口的形状进行了双重整形。在 PropTypes 我也做了`PropTypes.shape(importedShape)`。无论如何感谢您的帮助! (7认同)