如何摆脱React中的警告导入/无匿名默认导出

Question

我在consle中得到警告："在导出为模块默认导入/无匿名默认导出之前，将对象分配给变量">

这来自于我的.js函数，它将几个函数导出为默认函数。我不知道如何摆脱，同时仍然可以将几个函数导出为默认函数，并保持代码的简单性，如下所示。

function init() {}
function log(error) {
console.error(error);
}
export default {
init,
log,
};

我可以把文件写成：

export default function init() {}
export function log(error) {
console.error(error);
}

有什么我需要改变的设置，我可以做些什么吗？

Answer 1

它告诉您在导出之前给要导出的对象一个名称，以使使用的名称更有可能在整个代码库中保持一致。例如，更改为：

function init() {}
function log(error) {
console.error(error);
}
const logger = {
init,
log,
};
export default logger;

(给它取上下文中最有意义的名字——logger只是一个例子(

但如果你要导出多个东西，使用命名导出会更有意义。另一种选择是：

export function init() {}
export function log(error) {
console.error(error);
}

然后将其导入为：

import { init, log } from './foo.js';

Answer 2

在变量中插入数据，然后作为默认值导出。

//示例

const data = [
{
id: 1,
name: 'Bertie Yates',
age: 29,
image:
'https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-2_ipcjws.jpg',
},
{
id: 3,
name: 'Larry Little',
age: 36,
image:
'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg',
},
{
id: 4,
name: 'Sean Walsh',
age: 34,
image:
'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg',
},
]
export default data

Answer 3

朋友们，您可以在.eslintrc.cjs或.eslintrc.js中使用这些规则，并根据需要进行更改。

例如，有时您需要在不命名的情况下导出代码，如tailwind.config.js、postcss.config.js或axios配置，它们是object，在这种情况下，您可以使用"allowObject": true

rules: {
//...
"import/no-anonymous-default-export": ["error", {
"allowArray": false,
"allowArrowFunction": false,
"allowAnonymousClass": false,
"allowAnonymousFunction": false,
"allowCallExpression": false, // backward compatibility -> e.g. export default foo(bar)
"allowNew": false,
"allowLiteral": false,
"allowObject": true
}]
}

esint插件导入->没有匿名默认导出