ReactJS - onClick не вызывает функцию внутри функции map ()

Question

Я новичок в React и не могу понять, как можно вызвать функцию внутри с помощью onClick () в цикле карты. Позвольте мне показать вам:

  const changeLang = lang => {
    i18n.changeLanguage(lang);
  };

У меня есть эта функция, которая отвечает за получение таких языков, как английский или португальский. И то, что я пытаюсь сделать с помощью следующего кода, это изменить язык в зависимости от того, какой пункт меню я выбираю из меню. Для этого у меня есть следующий код:

const languages = [
  {
    value: 'pt',
    label: 'Portuguese',

  },
  {
    value: 'en',
    label: 'English',
  }
];

...
{languages.map(option => (
    <MenuItem key={option.value} value={option.value} onClick={() => this.changeLang (option.value)}>
        {option.label}
    </MenuItem>
))}

Проблема в том, что он не может войти в мою функцию changeLang, поэтому язык не выбран, никакого эффекта вообще нет. Я попробовал console.log и ничего не получил взамен. Я почти уверен, что проблема на onClick={() => this.changeLang (option.value)}, но я не могу понять, почему. Вы можете мне помочь?

Answer 1

Если это функциональный компонент, удалите это ключевое слово и вызовите непосредственно функцию changeLang

languages.map(option => (
    <MenuItem key={option.value} value={option.value} onClick={() => changeLang(option.value)}>
        {option.label}
    </MenuItem>
))

Answer 2

Какую ошибку вы видите в своей консоли?

Я сразу вижу возможную проблему с вашим changeLang: вы ничего не возвращаете с нее. Функция Arrow имеет неявный возврат, только если не используется синтаксис скобок:

Я также вижу эту опечатку:

this.changeLang (option.value)

be

this.changeLang(option.value)

Нет пробела между вызовом функции и ее аргументами.

Возможно, вы можете попробовать эти способы исследования и / или опубликовать более подробную информацию о вашем компоненте.

Answer 3

Это функциональный компонент, поэтому вам нужно звонить changeLang, а не this.changeLang