javascript - 在路由组件后连接，导致 props 中出现 bool 值

Question

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

版本:

react - v15.5.4

react 路由器 - v4.0

React Redux - v.5.0.6

我是 React 新手，甚至是 Redux 新手，当我开始思考 connect HOC 时，我开始遇到这个我似乎无法弄清楚的错误。

当我在 <switch> 之后将组件连接到我的 redux 存储时元素和一些<Route>元素。我的连接将我的属性返回为错误的 bool 值，其中连接中的组件具有正确的属性。

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

组件

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
};

控制台日志状态 与 bool prop 值连接 具有正确 props 的组件

错误:

Answer 1

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

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

UserDashboardPage.propTypes = {

};

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

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

UserDashboardPage.propTypes = {

};

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

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

export default connect(...)

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