ReactJS - onClick 不会调用 map() 函数中的函数答案

【问题标题】：ReactJS - onClick doesn't call the fucntion inside map() functionReactJS - onClick 不会调用 map() 函数中的函数
【发布时间】：2020-02-14 07:55:40
【问题描述】：

我是 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)}，但我不知道为什么。你能帮帮我吗？

【问题讨论】：

OnClick Event binding in React.js的可能重复
这是一个功能组件吗？
是的，我只是没有介绍所有代码，因为它对问题无用。
你能检查一下'this'是否有'changeLang'功能。你可以通过这个 onClick={() => console.log(this.changeLang)}
这是一个基于类的组件吗？

标签： javascript reactjs loops dictionary onclick

【解决方案1】：

您在控制台中看到什么样的错误？

我立即发现您的 changeLang 可能存在问题：您没有从中返回任何内容。箭头函数只有在不使用大括号语法时才有隐式返回：

我也看到了这个错字：

this.changeLang (option.value)

应该是

this.changeLang(option.value)

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

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

【讨论】：

没有错误，先生，它只是没有调用函数changeLang。
您是否也尝试修复错字？正如其他人所提到的，我们需要查看整个组件以提供更多帮助。

【解决方案2】：

如果这是功能组件，则删除此关键字并直接调用changeLang函数

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

【讨论】：

是吗，先生，什么都没发生

【解决方案3】：

这是一个功能组件，所以你需要调用changeLang而不是this.changeLang

【讨论】：

那...没有任何反应。
你能详细说明一下nothing happens吗？
当我点击菜单项时，什么也没有发生，就像没有操作没有 console.log。它只是没有进入函数“changeLang”
你配置react-i18next
你能在沙盒中复制问题并分享吗？