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

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 类型作为一个函数，以便两个实例的类型匹配。

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

如果你想更好地检查函数类型，你也可以查看 flow.org。

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

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

React - (nested) prop type is invalid; it must be a function

javascript

reactjs

types

prop