用 Redux 理解 HOC

Question

我有一个只显示用户列表的用户组件。我试图将它包装在 HOC 加载组件中，以便它仅在加载用户后显示，否则显示加载微调器（现在只是文本）

这是我的 HOC：

const Loading = (propName) => (WrappedComponent) => {
  return class extends React.Component{
    render(){
      return this.props[propName].length === 0 ? <div> Loading... </div> : <WrappedComponent {...this.props} />
    }
  }
}

export default Loading;

在我的用户组件的底部我有这个：

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Loading('users')(Users));

目前，Loading... 这个词只停留在屏幕上。并且propName 以undefined 的身份通过

我认为由于某种原因，用户组件永远不会被填充。我做错了什么？

Answer 1

cmets 后更新

我在下面的回答具有误导性，因为当时我没有正确理解您的意图。另外，我关于没有得到props 的解释在某种程度上是错误的。如果我们不渲染组件，这是真的，但你正在这样做。所以，问题不在于这个。

这里的问题是您的Loading 组件在获取用户后没有再次呈现。实际上，您永远不会获取用户 :) 以下是您的应用程序的步骤（可能）。

• 您正在导出一个 HOC 函数，而不是这里的 Wrapped 函数。它来自您的Users 文件，但它不会导出真正的Users 组件。这很重要。
• 您的父级第一次渲染，它渲染导出的 HOC 组件。
• 您的子组件呈现并落入Loading 一个而不是Users 一个。
• 在Loading 中，您的users 属性为空，因此您会看到Loading...。
• 您的Users 组件永远不会再次呈现。因此，获取那里的用户不会更新状态。

您的解决方案是从Users 中提取提取并提供此组件。可能在父母那里。所以：

• Parent 获取用户，然后呈现自己及其所有子项。
• 您的Loading HOC 组件再次呈现。

---

我不知道你打算如何使用这个 HOC，但如果我理解正确（因为我对 HOC 没有那么丰富的经验）在你的情况下，问题是你没有将任何 prop 传递给 @987654333 @ 功能。这是因为您在这里没有将它用作常规组件。它是一个函数，propName 这里只是一个参数。

当我们像这样渲染一个无状态函数时：

<Loading propName="foo" />

那么我们的函数就会有一个props 参数。如果我们不这样渲染，就不会有props 参数和props.propName。如果这是错误的，请有人解决这个问题并解释正确的逻辑。所以，你可能想做这样的事情：

class App extends React.Component {
  render() {
    return (
      <div><FooWithLoading /></div>
    );
  }
}

const Loading = (users) => (WrappedComponent) => {
  return class extends React.Component {
    render() {
      return (
        users.length === 0 ? <div> Loading... </div> :
        <WrappedComponent
          users={users}
        />
      );
    }
  }
};

const Foo = props => {
return (
  <div>
    Users: {props.users}
  </div>
);
}

const FooWithLoading = Loading("foobar")(Foo);

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

所以在你的情况下：

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Loading('users')(Users));

应该工作吗？

或者您需要在应用的合适位置正确渲染组件。