编译错误：在将箭头函数分配给变量之前必须先导出为模块默认

Question

编译时出现以下错误：

编译时出现警告。

src/Task.js

第4行第1个字符：将箭头函数分配给变量后再导出为模块默认值  import/no-anonymous-default-export

src/TaskList.js

第4行第1个字符：将箭头函数分配给变量后再导出为模块默认值  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。

Answer 1

对于箭头函数，由于它们是匿名的，您需要将其赋值给一个变量，然后再导出。根据您的代码，这个例子应该可以工作（但不要忘记在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警告，而不是语法错误，如果您禁用了该规则，您现有的代码将可以工作（但我建议不要这样做！）。

这个规则很有用，因为确保默认导出的命名有助于通过鼓励在声明位置和导入位置重复使用相同的标识符来提高代码库的可搜索性。