Question

我的控制台在启动应用时记录以下内容：

警告：失败道具类型：主页：道具类型home无效;它必须是一个功能

我已经在线查看但是没有看到嵌套道具类型的任何情况或示例返回此错误因此我正在努力纠正警告，这是我的代码：

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 - （嵌套）prop类型无效;它必须是一个功能

1 个答案: