【问题标题】:PropTypes shape get marked as requiredPropTypes 形状按要求标记
【发布时间】:2018-03-02 15:11:56
【问题描述】:

所以我正在尝试向我的组件对象添加一个形状。该对象从服务器加载,因此从一开始就不存在。但是当我将形状添加到 Proptypes 时。它不断抛出它被标记为必需但不是的错误。

shapeobjectOf 是否会自动添加 isRequired 值?

TopicsList.propTypes = {
  topicsObject: PropTypes.shape(reportsTopicsObjectResultShape),
};

还有形状:

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)
});

我仍然收到错误:

Failed prop type: The prop `topicsObject.isRequired` is marked as 
required in `TopicsList`, but its value is `undefined`.

确实,开头是undefined,这没关系,但我不希望它是必需的。

【问题讨论】:

    标签: javascript reactjs react-redux react-proptypes


    【解决方案1】:

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

    // 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
      }),
    

    这里是an example,如果您希望显示使用 shape 不会使对象成为必需对象(尽管最后使用 .isRequired 会产生警告),您可以尝试一下。

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

    "Warning: Failed prop type: The prop `foo` is marked as required in `App`, but its value is `undefined`.
    in App"
    

    道具显示为foo 而不是foo.isRequired。你的似乎在说

    prop `topicsObject.isRequired` 
    

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

    【讨论】:

    • 发现自己的错误。我对进口的形状进行了双重整形。在 PropTypes 我也做了PropTypes.shape(importedShape)。无论如何感谢您的帮助!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多