Ralat penyusunan: Fungsi anak panah mesti dieksport sebagai lalai modul sebelum memberikannya kepada pembolehubah

Question

Ralat berikut berlaku semasa menyusun:

Amaran berlaku semasa penyusunan.

src/Task.js

Baris 4, aksara pertama: tetapkan fungsi anak panah kepada pembolehubah dan kemudian eksportnya sebagai nilai lalai modul import/no-anonymous-default-export</ pra> ;
<p>src/TaskList.js</p>
<pre class="brush:php;toolbar:false;">Baris 4, aksara pertama: tetapkan fungsi anak panah kepada pembolehubah dan kemudian eksportnya sebagai nilai lalai modul import/no-anonymous-default-export</ pra> ;
<p>Berikut ialah fail JS saya:</p>
<p>Task.js</p>
<pre class="brush:php;toolbar:false;">import React daripada 'react';
import Senarai Tugas daripada './TaskList';

eksport lalai ({Tugas}) =>
    kembali (
        <p>
            {TaskList.description}
        </p>
    );
}

TaskList.js

import React daripada 'react';
import Tugasan daripada './Task.js'

eksport lalai ({ tasks }) =>
    kembali (
        <ul className="kumpulan senarai">
            {tasks.map(task => (
                <li key={task.id} className ="list-group-item">
                    <Tugas tugas={task} />
                </li>
            ))}
      </ul>
    );
}

Saya baru mula belajar React dan JavaScript.

Answer 1

Untuk fungsi anak panah, kerana ia adalah tanpa nama, anda perlu menetapkannya kepada pembolehubah dan kemudian mengeksportnya. Berdasarkan kod anda, contoh ini sepatutnya berfungsi (tetapi jangan lupa untuk mengisi logik dalam fungsi tasks.map)

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

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

export default Tasks;

Ini disebabkan oleh peraturan import/no-anonymous-default-export yang menghalang eksport lalai modul daripada tidak dinamakan.

Memandangkan ini hanyalah amaran lint dan bukan ralat sintaks, kod sedia ada anda akan berfungsi jika anda melumpuhkan peraturan (tetapi saya syorkan jangan lakukan ini!).

Peraturan ini berguna kerana memastikan penamaan eksport lalai membantu meningkatkan kebolehcarian asas kod anda dengan menggalakkan penggunaan semula pengecam yang sama di mana ia diisytiharkan dan di mana ia diimport.