在路由组件之后连接，在props中导致布尔值

Question

我目前正在使用React，React Router和React Redux构建应用程序

版本：

React - v15.5.4

React Router - v4.0

React Redux - v.5.0.6

我是React的新手，甚至是Redux的新手，当我绕过连接HOC时，我开始出现这个错误，我似乎无法弄明白。

当我在<switch>元素和一些<Route>元素之后将组件连接到我的redux商店时。我在其中的连接返回我的道具作为假布尔值，其中连接中的组件具有正确的道具。

例如，请参阅下面的代码和错误。

组件

UserDashboardPage = connect(state => {
  console.log("STATE", state);
  return {
    user: state.user.user,
    userAuth: state.user.userAuth,
    userFetched: state.user.fetched
  };
})(UserDashboardPage);

UserDashboardPage.propTypes = {
  user: PropTypes.shape(),
  userAuth: PropTypes.shape(),
  userFetched: PropTypes.boolean,
  dispatch: PropTypes.func
};

CONSOLE LOG STATE 使用布尔prop值连接 具有正确道具的组件

错误：

Answer 1

您正在使用调用UserDashboardPage的结果覆盖本地connect()变量。然后，在connect()返回的组件上设置PropTypes。

虽然你可以这样做，但在这种情况下你想要的是设置包装组件的PropTypes，而不是包装器组件。只需交换执行顺序即可：

UserDashboardPage.propTypes = {

};

UserDashboardPage = connect(state => {
  ...
})(UserDashboardPage);

但您可能需要考虑为一个组件或另一个组件使用不同的变量名称，例如

UserDashboardPage.propTypes = {

};

const ConnectedUserDashboardPage = connect(state => {
  ...
})(UserDashboardPage);

这通常不是问题，因为大多数人只是立即将连接的组件导出为默认导出：

export default connect(...)

您看到的false值来自React，将默认值分配给验证失败的道具。并且它们总是会失败验证，因为这些道具是从上下文中拉出来的，而不是作为普通道具传递的。

Answer 2

为什么要将UserDashboardPage传递给connect？这应该是您的非连接组件