컴파일 오류: 화살표 함수를 변수에 할당하기 전에 모듈 기본값으로 내보내야 합니다.

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(작업 => (
                <li key={task.id} className ="목록-그룹-항목">
                    <작업 task={task} />
                </li>
            ))}
      </ul>
    );
}

저는 이제 막 React와 JavaScript를 배우기 시작했습니다.

Answer 1

화살표 함수의 경우 익명이므로 변수에 할당한 다음 내보내야 합니다. 귀하의 코드에 따르면 이 예제는 작동할 것입니다(단,Tasks.map 함수에 논리를 채우는 것을 잊지 마세요)

으아악

이는 모듈의 기본 내보내기 이름이 지정되지 않는 것을 방지하는 import/no-anonymous-default-export 규칙으로 인해 발생합니다.

이것은 구문 오류가 아닌 단지 린트 경고이므로 규칙을 비활성화하면 기존 코드가 작동합니다(그러나 이 작업을 수행하지 않는 것이 좋습니다!).

이 규칙은 기본 내보내기 이름 지정을 보장하면 선언된 위치와 가져온 위치에서 동일한 식별자의 재사용을 장려하여 코드베이스의 검색 가능성을 향상시키는 데 도움이 되기 때문에 유용합니다.