React - （嵌套）道具类型无效；它必须是一个函数

Question

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

警告：失败的道具类型：主页：道具类型home无效；它必须是一个函数

我在网上查看过，但没有看到任何返回此错误的嵌套 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。

注意，我没有测试过这段代码，但它应该可以解决问题。