編譯錯誤：在將箭頭函數分配給變數之前必須先導出為模組默認

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警告，而不是語法錯誤，如果您禁用了該規則，您現有的程式碼將可以工作（但我建議不要這樣做！）。

這個規則很有用，因為確保預設匯出的命名有助於透過鼓勵在聲明位置和匯入位置重複使用相同的識別碼來提高程式碼庫的可搜尋性。