问题标签 [react-hoc]

我正在尝试构建一个 React/Redux 应用程序，我是一个初学者。我想使用 React Sortable HOC 来获得一个可重新排列的列表，但我无法坚持新的安排。我有一个功能组件，可以在其中获取项目列表。项目结构是这样的：项目 [ {name, courseList}, {name, courseList}, ...]。

为了填充表格，我进行了 api 调用并使用 MapStateToProps 更新了 prop 变量。这是一段代码：

这是 mapStateToProps 函数：

这一点工作正常，一切都出现了。问题是当我尝试重新排列并将其保存在 onSortEnd 函数中时：

newCollection 被正确填充和修改，我正在调用 updateCoursesOrder 并正确排列项目。该函数是一个调用调度的动作。

使用调试器，我可以看到代码运行良好，直到从 setNewCourseOrderSuccess() 调度返回。

这应该转到减速器，但会引发错误：未捕获的不变违规：在调度之间检测到状态突变。

这是减速器的样子：

我该如何解决这个问题？非常感谢你！

我有一个像这样的 HOC，我想测试这个getStuff2功能：

我正在像这样测试它：

但是当我运行它时，它说getStuff2找不到。当我打印出包装器时，我只看到getStuff1渲染时传入的内容：

我不想传入getStuff2被包装的组件，因为那里不需要它。它只需要作为辅助方法，getStuff1所以有没有一种方法可以访问该方法而不将其传递给包装的组件？

我有以下组件将复选框转换为漂亮的切换开关

我在理解前向引用的工作原理时遇到了问题，并且遇到了一些错误。我也可能被 HOC 组件弄糊涂了

如果我像这样从不同的组件调用它：

它按预期工作，没有任何问题。但是，如果我按以下方式调用它：

我有一个从正文获取数据的表格组件：

每个键都是列。现在在表格组件中，我有一个基于类型的开关。如果类型 = “组件”

在这里我得到一个错误： Uncaught TypeError: component is not a function

任何帮助，将不胜感激。我查看了类似的问题，但找不到任何解决方案。谢谢

我有一个组件，我尝试编写（从“compose-function”库导入）如下；

但是，由于某种原因，我看到以下错误；

错误指出在行上；让 MyGridWithData = compose(...)

此外，虽然 withRouter 和 withTranslation 是标准钩子，但 withMyApi 定义如下（基本上是 HOF）；

对于上下文，我正在将 Django Rest Framework 后端与 Next.js + Next-Auth 集成在一起。我已经完成了大部分集成，除了一部分。要求是有一个刷新令牌系统，该系统将在访问令牌快过期时尝试刷新访问令牌。这是我的逻辑：

/api/auth/[...nextauth].ts

接下来，Next-Auth 文档中的示例展示了useSession()hook 的使用。但我不喜欢它，因为：

1. 一旦刷新访问令牌，它就不会更新会话的状态，除非窗口本身被刷新（这是一个未解决的问题）
2. 感觉就像每个想要使用会话的组件上都有很多代码重复，使用检查会话对象是否存在、会话是否正在加载等的守卫。所以我想使用 HOC。

因此，我想出了以下解决方案：

constants/Hooks.tsx

constants/HOCs.tsx

然后，在我有定期数据获取要求的组件中（我知道这可以以更好的方式实现，这只是一个人为的例子，我试图模拟用户不活动但应用程序仍然可以在需要时在后台运行)，我正在使用 HOC：

pages/posts.tsx

withAuth问题是由于HOC 并且可能由于useAuth每 10 秒的钩子，整个页面都会重新渲染。但是，我没有运气尝试调试它。也许我在我的 React 概念中遗漏了一些关键的东西。我感谢任何和所有可能的建议/帮助。提前致谢。

PS。我知道使用SWR库的解决方案，但我想尽可能避免使用该库。

我正在关注关于高阶组件（HOC）的 reactjs 教程。我想要一个 HOC 在道具更改时记录道具。

起初我以为是因为我使用的是 HOC。所以我介绍了另一种生命周期方法，componentDidMount它正在触发。componentDidUpdate没有开火，这是为什么呢？

再会。我正在构建一个组件树，并希望在树的其他组件中使用根组件的功能。我通过所有树抛出函数引用。如果我需要从非根组件中的函数获取值，我也会使用该对象。你能帮助我吗？你能告诉我如何作为 HOC 做到这一点吗？如果您在我的代码上显示示例并不难。

我正在动态生成 HOC 父级的子组件（见下文）。我将道具直接传递给其中一个孩子并将道具放入其中。我希望看到孩子在道具上重新渲染会发生变化，但事实并非如此。

代码在某处不正确吗？

ParentComponent

App.js

在转换为 HOC 组件之前，我在下面有一段代码运行良好：

我将其更改为如下所示的 HOC 组件，但它不起作用，也没有错误通知。此代码todolist来自reduxjs官方文档的规范教程。我检查了反应官方文档https://reactjs.org/docs/higher-order-components.html，没有发现任何不遵守其规则的异常。有人知道什么是错误？

我有 Tree 组件，它呈现绘制 TreeItem 的 TreeItemsRenderer。它们中的每一个都是独立的组件。
我需要接受替换默认 TreeItem 的动态组件，并且我需要拥有所有默认 TreeItem 道具。（例如：const CustomComponent 扩展 TreeItem）。树在代码中的许多地方使用。所以它必须是通用的。

• 我试图通过创建泛型类型从默认 TreeItem 获取所有属性 D extends ITreeItemProps<T>。
• Tgeneric 用于项目类型。
• 所有的自动完成都是从外部工作的。只有错误出现在渲染 SelectedRowComponent 的 TreeItemRenderer 组件上。

这是我的组件（有时可能不合逻辑，因为我删除了不必要的东西并简化了逻辑）：

树 ：

树项渲染器：

类型组件：

我的问题是在第 28 行的 TreeItemRenderer