React组件RefineSearchBar未配置isRequired却触发prop必填警告

问题根因&修复方案 #

你遇到的警告由两个常见问题触发，按优先级排查即可：

1. PropTypes 语法写法错误
   你当前写的queryObjState: PropTypes.shape(PropTypes.any)不符合PropTypes规范：PropTypes.shape()要求传入的参数是描述对象内部属性结构的配置对象，直接传入PropTypes.any会导致校验逻辑异常，误将该字段识别为必填项。
   修正方案两种二选一：

• 如果你不需要严格校验queryObjState的内部结构，直接改成：

  queryObjState: PropTypes.object
  

• 如果你需要匹配你写的defaultProps结构做校验，改成：

  queryObjState: PropTypes.shape({
    location: PropTypes.string,
    coordinates: PropTypes.shape({
      latitude: PropTypes.number,
      longitude: PropTypes.number
    }),
    radius: PropTypes.number,
    priceLevel: PropTypes.string
  })
  

2. 父组件显式传入undefined导致defaultProps不生效
   React的defaultProps只有在父组件完全不传这个属性的时候才会生效，如果父组件调用时写了queryObjState={undefined}（比如父组件的对应状态初始化就是undefined、接口未返回就传值），那defaultProps不会生效，queryObjState的值就是undefined。
   修正方案：

• 检查父组件的传值逻辑，给对应状态设置初始值，或者传值时加兜底：queryObjState={父组件的状态变量 || {}}
• 优先级更高的兜底方案：直接在子组件参数解构时加默认值，覆盖defaultProps的逻辑：

  export default function RefineSearchBar({ travelAdvisorApi, queryObjState = {} }) {
    // 组件逻辑
  }
  

内容的提问来源于stack exchange，提问作者JamesJavascript