React报错：Prop type需为函数却收到对象，求技术解决方案

嘿，我一眼就看出问题出在哪了！这个错误是因为你在定义leoInfo的PropTypes时用错了语法——你直接把一个普通对象赋值给了它，但PropTypes要求我们用它提供的专用方法来定义复杂的对象结构。

先看你现在的Props校验代码：

StateTool.propTypes = {
  state: PropTypes.string,
  leoInfo: {
    regionId: PropTypes.string,
    phoneNumbers: PropTypes.arrayOf(PropTypes.string),
  },
};

这里的核心问题是：leoInfo的值是一个普通对象，但PropTypes期望的是一个由prop-types包提供的校验函数（比如PropTypes.string、PropTypes.array这类）。对于结构化的对象类型，我们需要用PropTypes.shape()来包裹它的属性定义，这样PropTypes才能识别这是一个合法的类型校验规则。

修正后的代码应该是这样的：

StateTool.propTypes = {
  state: PropTypes.string,
  leoInfo: PropTypes.shape({
    regionId: PropTypes.string,
    phoneNumbers: PropTypes.arrayOf(PropTypes.string),
  }),
};

如果leoInfo是组件必须接收的属性，你还可以在后面加上.isRequired来强制要求父组件传入：

leoInfo: PropTypes.shape({
  regionId: PropTypes.string,
  phoneNumbers: PropTypes.arrayOf(PropTypes.string),
}).isRequired,

这样改完之后，那个Prop type错误应该就消失啦！

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