为多个不工作的 React Native 组件提供相同的功能答案

【问题标题】：Providing the same function to several React Native components not working为多个不工作的 React Native 组件提供相同的功能
【发布时间】：2018-05-24 17:12:59
【问题描述】：

我正在使用 React Native 编写一个非常简单的数据库应用程序，用户可以在其中添加自己的字符并稍后查看它们。

我的问题如下。

添加角色的一部分是设置他们的能力，这是通过从 Ant Mobile Design 导入的 React Native Tags 完成的。

以下是标签在应用程序中的显示方式。

<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
  <Tag onChange={() => this.handleAbility('Hell')} style={{ marginRight: 7 }}> Hell </Tag>
  {this.state.abilities.map(function (ability) {
  return <Tag onChange={() =>this.handleAbility(ability.label)} style={{ marginRight: 7 }}> {ability.label} </Tag>
  })}
</ScrollView>

这是 handleAbility 函数的代码。

handleAbility = (label) => {
let character = Object.assign({}, this.state.character);
if (character.abilities.indexOf(label) == -1) {
character.abilities.push(label);
this.setState({ character });
} else {
character.abilities.pop();
this.setState({ character });
}
}

当我按下我手动写的“地狱”标签时，功能触发成功，并将“地狱”能力推送到应用状态下的角色属性。然而，当我按下通过地图功能生成的任何其他标签时，会发生以下错误。我尝试了几种方法来解决这个问题，但无济于事，感谢任何帮助！

【问题讨论】：

标签： android reactjs react-native native

【解决方案1】：

我会尝试改变这一行：

{this.state.abilities.map(function (ability) {

到一个箭头函数，像这样：

{this.state.abilities.map(ability => {

【讨论】：

哇，非常感谢！工作起来就像一个魅力，我立即明白了它背后的逻辑以及为什么它一开始就不起作用......
很高兴听到！ :)