Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle

我收到这个警告消息在我的铬控制台为我的反应本机项目。你知道我为什么会收到这个吗？

这是完整的信息:

请求循环: node _ module/response-national-radio-tons/lib/index.js-> Node _ module/response-national-单选按钮/lib/segmed-control. js-> Node _ module/response-national-radio-tons/lib/index.js

允许要求循环，但可能导致未初始化的值。 Consider refactoring to remove the need for a cycle.

谢谢你的建议。 谢谢

142318 次浏览
小开

将 单元 A导入到 module B，将 module B导入到 单元 A，导致 A → B → A → B → A..。循环，而 可以导致错误。通过重新构建模块来解决这个问题，从而打破循环。

详细答案

在 javascript 中，如果你将不同的模块导入到其他模块中，所有这些导入都会生成一个依赖树:

                                 root_module
┌───────────┴───────────┐
sub_module_A             sub_module_B
┌────────┴────────┐
sub_module_C       sub_module_D

当你运行你的代码时，所有的模块都会从底部到顶部或者从叶子到主干进行计算，例如，如果你将模块 C和 D导入到模块 B中，那么所有的 C和 D的导出都已经被计算并且不再是未定义的了。如果模块 B在 C和 D之前被评估，那么模块 B将不工作，因为从 C和 D的所有导出都将是 D1，因为它们还没有被评估。

尽管如此，仍然可以在依赖关系树中形成循环(这就是需要警告的地方) :

                                 root_module
┌───────────┴───────────┐
sub_module_A             sub_module_B
↑ ↓
sub_module_C

问题: 假设评估从模块 C开始。由于它从模块 B导入了一些内容，并且尚未对其进行评估，因此模块 C无法正常工作。所有从 B 进口的东西都是未定义的.这实际上并没有那么糟糕，因为在最终模块 C被再次求值时，其他所有内容都已被求值，所以 C也正在工作。如果从模块 B开始进行评估，情况也是一样。

但是: 如果您的代码从一开始就依赖于一个工作模块 C，这将导致很难找到错误。因此会得到这个错误。

如何解决: 在你的案例中，警告也给出了一个详细的解释，哪里出现了循环。在 node_modules/react-native-radio-buttons/lib/index.js中导入 native-radio-buttons/lib/segmented-controls.js，在 native-radio-buttons/lib/segmented-controls.js中导入 node_modules/react-native-radio-buttons/lib/index.js。看起来这个循环被放置在你的一些节点模块中。不幸的是，在这种情况下，你不可能自己解决这个问题。

如果循环在您自己的代码中，那么您必须将一些导出提取到第三个模块/文件中，从该模块/文件中将代码导入到先前形成循环的两个模块中。

小开

您可能是从“文件 A”导入某些内容到“文件 B”，然后再从“文件 B”导入某些内容到“文件 A”。 检查这两个文件的所有导入，看看是否存在这样的循环。

小开

以防止必须编写多行

import SomeComponent from "../components"
import AnotherComponent from "../components"
import AndAnotherComponent from "../components"
import AndOneMoreComponent from "../components"

我创建了一个 comp.js 文件，可以在创建组件时导入它们，并将它们作为模块导出。 然后，所有组件都可以从一个地方到达。 这样你就可以在某个地方拥有这样的东西。

import { SomeComponent, AnotherComponent, AndAnotherComponent, AndOneMoreComponent} from './comp'

现在在渲染器中会发生什么，例如当某个组件被渲染时... ..。

import * as React from "react";
import { AnotherComponent} from '../comps';
import { View, Text } from "react-native";


function SomeComponent() {
return (
<>
<AnotherComponent />
<View><Text>EXAMPLE OF SOMECOMPONENT</Text></View>
</>
)
}
export default SomeComponent;

在这个示例中，可以在主应用程序中调用 Some Component，当它呈现时，它还会从 comp.js 中请求一个组件 这就是触发 Require 循环警告的原因，因为从一个地方导入的模块正在呈现，并要求从与其呈现地点相同的地方导入另一个模块。

What are your thoughts on this, should I revert back to using single import statements or do you think there is a danger in using the module export as it is currently setup?

小开

在我自己的案例中，我在反应式导航中出售了同样的问题。

我做了什么？

Already I was using react-navigation like below

 export const containerRef = createRef();


function App(){
return (
<NavigationContainer ref={containerRef}>
....
<NavigationContainer>
);
}

然后我就像这样:

import {containerRef} from 'filename';


onPress = ()=> containerRef.current.navigate('Chat');

但是我更新了下面的内容，警告消失了。

 function App(){
return (
<NavigationContainer> // removed ref
....
<NavigationContainer>
);
}

然后我就像这样:

import { useNavigation } from '@react-navigation/native';


onPress = ()=> useNavigation.navigate('Chat');
小开

对我来说，警告是这样的;

请求循环: src views TeamVerification.js-> src 组件 TeamVerificationListItem.js-> Src views TeamVerification.js 请求循环是允许的，但是可能导致未初始化的值。

正如它所指出的，TeamVerificationListItem 导入了 TeamVerificationListItem，TeamVerificationListItem 也导入了 TeamVerificationListItem。这是一个未使用的进口，但在我删除它的警告消失了。

小开

请检查您是否在该文件中导入了相同的详细信息。 (即)

您的文件作为 action/meals.js，并且您已经在同一个文件中添加了以下行，如

import { Something } from './actions/meals.js'

小开

In my case, i had the same warning after the installation of a 'package'

在他们的文件中，是 import SomeFunc from 'package'

警告立刻就出现了

需要循环是允许的，但是可能导致未初始化的值。考虑重构以消除对循环的需要。

but as soon as I destructure the SomeFunc there was no more warning

import {SomeFunc} from 'package'

请看 解体

小开

如果代码包含 循环依赖性循环依赖性，就会发生这种情况。如果这些依赖项存在于您自己的库中，则可以轻松地修复它们。但是，如果这种情况发生在第三方库中，那么除了等待开发人员修复这些问题之外，您不能做太多的事情。

另一个原因可能是: 如果通过 require关键字进行导入，则会导致此警告。将这些语句替换为 import语句，这样就可以了。比如说,

const abc = require("example"); // Don't use this syntax
import abc from "example"       // Use this syntax instead

注意: 这可能因项目而异。要详细了解需求和导入，请参阅 这个链接。

小开

如果在 @ response-導航/原生中使用 导航容器

import {createRef} from 'react';


<NavigationContainer ref={createRef()}>
小开

我在我的项目中使用了 react-native-maps，我得到了相同的错误。

刚从0.27.1升级到0.28.0。

我可以确认这个问题已经解决了。

谢谢你

小开

正如其他人已经提到的，为您自己的包

  1. 将两个模块中需要的内容相互移动到第三个模块中
  2. 如果您位于相同的“ my-module”中，则避免从桶文件(index.ts/js)或别名(@mycompany/my-module)导入

其他人没有提到的(这似乎是 OP 的问题) ，对于不在您职责范围内的包(例如来自 NPM 的 node _ module) ，您唯一能做的就是

  1. 关闭警报。它仍然会出现在城市控制台中，但不会再出现黄色警告快餐栏: import { LogBox } from 'react-native'; LogBox.ignoreLogs(['Require cycle: node_modules/']);例如，您可以将代码放在 App.tsx 中。
  2. 修改 node _ module 本身的包内容，并在每次 npm install之后通过 patch-package = > 修补包内容，我认为如果循环导入不产生实际错误，那么这样做是过分的
小开

您应该在 ES 模块项目的关系属性中使用关系包装类型，以避免循环依赖问题，只需单击这里: https://typeorm.io/#relations-in-esm-projects


提交答案