reactjs 编译错误:在导出为模块默认值之前将箭头函数分配给变量

dpiehjr4  于 2022-12-03  发布在  React
关注(0)|答案(1)|浏览(182)

我目前在编译时遇到此错误:
编译时出现警告。
src/Task.js

Line 4:1:  Assign arrow function to a variable before exporting as module default  import/no-anonymous-default-export

src/TaskList.js

Line 4:1:  Assign arrow function to a variable before exporting as module default  import/no-anonymous-default-export

下面是我的JS文件:Task.js

import React from 'react';
import TaskList from './TaskList';

export default ({Task}) => {
    return (
        <p>
            {TaskList.decription}
        </p>
    );
}

TaskList.js

import  React from 'react';
import Task from './Task.js'

export default ({ tasks }) => {
    return (
        <ul className="list-group">
            {tasks.map(task => (
                <li key={task.id} className ="list-group-item">
                    <Task task={task} />
                </li>
            ))}
      </ul>      
    );
}

我刚刚开始使用React和Javascript。

brc7rcf0

brc7rcf01#

对于箭头函数,由于它们是匿名的,你需要将它赋给一个变量,然后导出它。这个例子,基于你的代码应该可以工作(但是不要忘记在www.example.com函数中填充逻辑tasks.map)

import React from 'react';
import TaskList from './TaskList';

const Tasks = ({ tasks }) => {
  return tasks.map(task => ( ... ));
} 

export default Tasks;

这是由import/no-anonymous-default-export规则引起的,该规则防止模块的默认导出未命名。
由于这是一个lint警告,而不是语法错误,如果您禁用该规则,现有代码将工作(但我建议不要这样做!)
此规则非常有用,因为确保命名默认导出有助于提高代码库的可连接性,因为它鼓励在模块的声明站点和导入站点重用模块默认导出的相同标识符。

相关问题