Javascript 用Redux理解HOCs

我有一个用户组件，它只显示一个用户列表。我已经尝试将它包装在一个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;

目前，单词

加载…

只是停留在屏幕上。而

propName

将作为

undefined

---

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

评论后更新

我下面的回答是误导性的，因为我当时没有正确理解你的意图。此外，我对没有获得

道具的解释在某种程度上是错误的。这是真的，如果我们不渲染组件，但在这里你正在这样做。所以，问题不是这样

这里的问题是，在获取用户后，
加载
组件不会再次呈现。事实上，你从来没有获取过用户：）以下是你的应用程序的步骤（可能）


您正在导出一个HOC函数，而不是此处包装的函数。它来自您的
Users
文件，但不导出真正的
Users
组件。这很重要
您的父级将第一次渲染，并渲染导出的HOC组件
您的子组件呈现并落入
加载
中，而不是
用户
中
在
加载
中，您的
用户
道具为空，因此您可以看到加载…
您的
用户
组件将不再渲染。因此，在那里获取用户不会更新状态

您的解决方案是从
用户
中提取提取数据，并向该组件馈送数据。可能是父母的。因此：


父对象获取用户，然后呈现其自身及其所有子对象
您的
加载
HOC组件将进行第二次渲染


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

当我们呈现这样一个无状态函数时：

<Loading propName="foo" />


你想用这个做什么。道具[propName]？有道具吗？@三思而后行，我想根据道具渲染组件。我现在要问你如何获得用户以及如何渲染此组件。因为我没有从你的问题中得到结构：）很高兴你解决了你的问题。您可以提供有关解决方案的详细答案并接受它。干杯，非常感谢！我不认为问题在于HOC的定义方式。你刚刚取消了他的咖喱版本。两个HOC应该是等效的。@FK82，是的，你是对的。主要问题不在这里。我已经恢复了原来的版本。@devserkan我想使用currying和HOCs。提高我对它们的认识。我知道如何以传统的方式使用加载组件渲染组件
<Loading propName="foo" />