コンパイル エラー: アロー関数を変数に割り当てる前に、アロー関数をモジュールのデフォルトとしてエクスポートする必要があります

Question

コンパイル中に次のエラーが発生しました:

コンパイル中に警告が発生しました。

src/Task.js

行 4、最初の文字: アロー関数を変数に代入し、モジュールのデフォルト値としてエクスポートします import/no-anonymous-default-export</前>;
<p>src/TaskList.js</p>
<pre class="brush:php;toolbar:false;">行 4、最初の文字: アロー関数を変数に代入し、モジュールのデフォルト値としてエクスポートします import/no-anonymous-default-export</前>;
<p>以下は私の JS ファイルです:</p>
<p>Task.js</p>
<pre class="brush:php;toolbar:false;">React を 'react' からインポートします。
'./TaskList' から TaskList をインポートします。

デフォルトをエクスポート ({タスク}) => {
    戻る （
        <p>
            {タスクリスト.説明}
        </p>
    );
}

TaskList.js

React を 'react' からインポートします。
「./Task.js」からタスクをインポートします

デフォルトをエクスポート ({ タスク }) => {
    戻る （
        <ul className="リストグループ">
            {tasks.map(task => (
                <li key={task.id} className ="リストグループ項目">
                    <タスク task={task} />
                </li>
            ))}
      </ul>
    );
}

React と JavaScript を学び始めたところです。

Answer 1

アロー関数の場合、匿名であるため、変数に割り当ててからエクスポートする必要があります。コードに基づいて、この例は機能するはずです (ただし、tasks.map 関数にロジックを記入することを忘れないでください)

リーリー

これは、モジュールのデフォルトのエクスポートが名前なしになることを防ぐ import/no-anonymous-default-export ルールによって発生します。

これは単なる lint 警告であり、構文エラーではないため、ルールを無効にしても既存のコードは機能します (ただし、 これは行わないことをお勧めします)。

このルールは、デフォルトのエクスポートに名前が付けられていることを確認すると、宣言場所とインポート場所で同じ識別子の再利用が促進され、コード ベースの検索性が向上するため役立ちます。