React编译警告：需将箭头函数赋值给变量后再默认导出

安全阿岳

2026-8-10

解决React编译警告：Assign arrow function to a variable before exporting as module default

警告原因

这是ESLint的import/no-anonymous-default-export规则在约束——它不允许直接将匿名箭头函数作为模块默认导出，必须先给箭头函数命名并赋值给变量，再导出这个变量。

修改后的代码

Task.js

原代码里还有两处小问题：一是没必要导入TaskList（实际未用到），二是参数解构的{Task}和要访问的属性不匹配，应该改成{task}。修正后代码如下：

import React from 'react';

// 先给组件函数命名，赋值给变量
const Task = ({ task }) => {
    return (
        <p>
            {task.description}
        </p>
    );
};

// 导出具名变量作为默认导出
export default Task;

TaskList.js

按照规则修改导出方式，同时可以去掉导入路径里多余的.js（React导入组件时允许省略后缀）：

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

// 定义具名组件函数
const TaskList = ({ tasks }) => {
    return (
        <ul className="list-group">
            {tasks.map(task => (
                <li key={task.id} className="list-group-item">
                    <Task task={task} />
                </li>
            ))}
        </ul>      
    );
};

// 导出具名变量
export default TaskList;