javascript - React - (嵌套) Prop 类型无效；它必须是一个函数

Question

当我启动应用程序时，我的控制台会记录以下内容:

Warning: Failed prop type: Home: prop type home is invalid; it must be a function

我在网上查看过，但没有看到嵌套 prop-type 返回此错误的任何案例或示例，因此正在努力纠正警告，这是我的代码:

Home.propTypes = {
  home: {
    readyStatus: PropTypes.string,
    list: PropTypes.arrayOf(PropTypes.object),
  },
  fetchUsersIfNeeded: PropTypes.func,
};

Home.defaultProps = {
  home: () => {},
  readyStatus: '',
  fetchUsersIfNeeded: () => {},
};

感谢任何帮助或建议 - 预先感谢您!

Answer 1

我认为问题出在书写方式

Home.propTypes = {
  home: PropTypes.shape({
    readyStatus: PropTypes.string,
    list: PropTypes.arrayOf(PropTypes.object).isRequired,
  }),
  fetchUsersIfNeeded: PropTypes.func,
};

Home.defaultProps = {
  home: {
    list: [],
    readyStatus: '',
  },
  fetchUsersIfNeeded: () => {},
};

第一个解决方案使类型与对象相似并且应该可以工作。其他选项可能是:

Home.propTypes = {
  home: PropTypes.func,
  fetchUsersIfNeeded: PropTypes.func,
};

Home.defaultProps = {
  home: () => {},
  fetchUsersIfNeeded: () => {},
};

这里我们将 prop 类型设置为函数，以便两个实例的类型匹配。

一个快速提示，如果 home 是一个属于状态的对象，那么它应该是像解决方案 1 这样的对象，或者如果 home 是从其他状态或网络调用或任何东西派生的计算值，那么您应该使用该函数.

如果您想要更好地对函数进行类型检查，您也可以查看 flow.org。

请注意，我尚未测试此代码，但它应该可以解决问题。