javascript - ReactJS - onClick 不调用 map() 函数内的函数

Question

我是 React 新手，我不知道如何通过 map 循环上的 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>
))