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>
))

Answer 2

这是一个功能组件，因此您需要调用changeLang而不是this.changeLang

Answer 3

您在控制台中看到哪种错误？

我立即看到您的DispatchQueue.main.asyncAfter(deadline: .now() + 1) { windowScene.screen.overscanCompensation = .none } 可能存在问题：您没有从中返回任何内容。仅当不使用花括号语法时，箭头函数才隐式返回：

我也看到这种错字：

changeLang

应该是

this.changeLang (option.value)

函数调用及其参数之间没有空格。

也许您可以尝试这些调查途径，和/或发布有关组件的更多详细信息。