Как я могу избавиться от предупреждающего импорта/без-анонимного-экспорта по умолчанию в React?

ProgramBox

Как я могу избавиться от предупреждающего импорта/без-анонимного-экспорта по умолчанию в React?

Post author:admin
Запись опубликована:2 января, 2022
Post category:Вопросы по программированию

#reactjs #react-hooks #axios

#язык JavaScript #реагирует на #Сборник

Вопрос:

Я получаю предупреждение в консле:»Назначьте объект переменной перед экспортом в качестве импорта модуля по умолчанию/без-анонимного-экспорта по умолчанию».

Это происходит из моих функций .js, которые экспортируют несколько функций по умолчанию. Я не уверен, как избавиться от этого, все еще имея возможность экспортировать несколько функций по умолчанию и сохранить код простым, как показано ниже.

 function init() {}  function log(error) {  console.error(error); }  export default {  init,  log, };

Я мог бы записать файл как:

 export default function init() {}  export function log(error) {  console.error(error); }

Есть ли какие-то настройки, которые мне нужно изменить, что я могу с этим поделать?

Ответ №1:

Это говорит вам о том, чтобы дать экспортируемому объекту имя перед экспортом, чтобы повысить вероятность того, что используемое имя соответствует всей кодовой базе. Например, измените на:

 function init() {}  function log(error) {  console.error(error); }  const logger = {  init,  log, }; export default logger;

(Дайте ему любое название, которое имеет наибольший смысл в контексте — logger это просто пример)

Но если вы собираетесь экспортировать несколько вещей, использование именованного экспорта имело бы немного больше смысла, ИМО. Другой вариант-сделать:

 export function init() {}  export function log(error) {  console.error(error); }

а затем импортируйте их как:

 import { init, log } from './foo.js';

1. И почему это так важно? Есть ли причины, по которым я должен следовать этому правилу в случае стандартной веб-разработки? Я не могу вспомнить ни одной ситуации, когда у меня были какие-либо проблемы с безымянным экспортом по умолчанию.

2. @Velidan Единственная проблема, которую это может вызвать, — это ремонтопригодность . Логика кода, если она реализована должным образом, будет работать независимо от того, присвоено ли имя экспорту по умолчанию. Предварительное размещение экспорта по умолчанию в переменную вынудит вас дать ей имя , предоставляя потребителям модуля соглашение о том, как вы рекомендуете называть импорт. Без намека имена могут стать очень непоследовательными. myHttpLibrary или MyHttpLibrary или MyHTTPLibrary и т. Д. Непреднамеренное несоответствие является частой причиной ошибок в программировании. Не так уж и много, но именно поэтому существует правило ворса.

3. Я понимаю, спасибо за разъяснение, но, честно говоря, мы обычно используем «баррель» или экспорт по умолчанию либо в какой-то файл индекса папки, либо в сам модуль. У каждого из них есть свое название. Например /formik/index.ts , экспорт. Мы определенно знаем, что это пакет formik. Или /some-folder/Formik.tsx — и снова мы знаем, что это пакет formik, потому что мы импортируем его и видим, какое именно у него имя. Пожалуйста, исправь меня, если я ошибаюсь. Я просто хочу понять причину этого правила

4. @Velidan Иметь точное имя , указывающее, что вы импортируете, немного лучше. /formik/index.ts вероятно, этого недостаточно… import myFormikPackage ? import theIndexFormikPackage ? formik ? Formik ? Не совсем очевидно, каким он должен быть. Если имя файла или (если index.js ) имя папки всегда точно не совпадает с экспортом, включая заглавные буквы, это здорово — это то, что я делал при использовании экспорта по умолчанию. Но это немного сложнее реализовать с точки зрения стиля. Было бы нетрудно случайно оказаться непоследовательным. Это одна из причин, по которой я предпочитаю именованный экспорт.

5. @CertainPerformance, спасибо за подробное объяснение. Я понял вашу позицию

Ответ №2:

Как сохранить ваши данные в переменной, а затем экспортировать по умолчанию.

//Пример

 const data = [  {  id: 1,  name: 'Bertie Yates',  age: 29,  image:  'https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-2_ipcjws.jpg',  },   {  id: 3,  name: 'Larry Little',  age: 36,  image:  'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg',  },  {  id: 4,  name: 'Sean Walsh',  age: 34,  image:  'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg',  }, ] export default data