在路由组件后连接导致道具中的布尔值答案

【问题标题】：Connect after routed component causing boolean values in props在路由组件后连接导致道具中的布尔值
【发布时间】：2018-07-22 03:40:34
【问题描述】：

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

版本：

反应 - v15.5.4

反应路由器 - 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
};

控制台日志状态与布尔属性值连接具有正确道具的组件

错误：

【问题讨论】：

标签： javascript reactjs redux react-router

【解决方案1】：

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

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

UserDashboardPage.propTypes = {

};

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

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

UserDashboardPage.propTypes = {

};

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

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

export default connect(...)

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

【讨论】：

噢！完全有道理！谢谢。以为是那样的蹩脚的东西。

【解决方案2】：

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

【讨论】：