Не может устранить эту ошибку: ожидается ошибка Javascript ','

У меня ошибка в этом array.map(), и я не могу понять, в чем проблема

const Websiteviewer = ({ web, content, styles, design }) => {



const test = ['1' , '2']
  return (
      {test.map(item => {
        console.log(item);
      } )}
  ) 
}

export default Websiteviewer

это компонент реакции, и у меня есть следующая ошибка ->

[{ "resource": "/c:/path/WebsiteViewer.js", "owner": "typescript", "code": "1005", "severity": 8, "message": "',' expected.", "source": "ts", "startLineNumber": 18, "startColumn": 12, "endLineNumber": 18, "endColumn": 13 }]

изображение ошибки

если у вас есть идеи, как это решить. спасибо

Вы можете писать JSX только в файлах JSX

CertainPerformance 09.04.2022 18:40

вы возвращаете объект (внутри круглых скобок оператора, которые здесь совершенно не нужны, потому что они ничего не делают). Объекты указаны как { key: value }, и вы использовали { value }, поэтому ошибка говорит: «Я ожидал здесь :, а в вашем коде есть ., пожалуйста, исправьте это, потому что на данный момент это недопустимый синтаксис».

Mike 'Pomax' Kamermans 09.04.2022 18:42

Что касается JSX, вы бы сразу items.map(...), вообще без фигурных скобок вокруг него, что в данном случае является точно таким же решением, как и для простого JS (хотя и по другим причинам).

Mike 'Pomax' Kamermans 09.04.2022 18:45
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
3
37
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Не рекомендуется регистрировать значение внутри синтаксиса JSX. Но вы можете предотвратить свою синтаксическую ошибку, как это

const Websiteviewer = ({ web, content, styles, design }) => {
  const test = ["1", "2"];
  return (
    <>
      {test.map((item) => {
        console.log(item);
      })}
    </>
  );
};

export default Websiteviewer

Верните свой элемент внутри фрагмента или div, поскольку вы можете возвращать JSX только в файлах JSX. Однако регистрация значения внутри возврата JSX - плохой подход.

const Websiteviewer = ({ web, content, styles, design }) => {
  const test = ["1", "2"];
  return (
    <>
      {test.map((item) => {
        console.log(item);
      })}
    </>
  );
};

export default Websiteviewer

Другие вопросы по теме