为几个不起作用的React Native组件提供相同的功能

Question

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

我的问题如下。

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

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

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

当我按下标签时，我手动用＆＃34; Hell＆＃34;标签，功能被成功触发，能力＆＃34;地狱＆＃34;被推送到应用程序状态中的角色属性。 然而，当我按下通过map函数生成的任何其他标记时，会发生以下错误。我尝试了几种方法来解决这个问题无济于事，感谢任何帮助！

Answer 1

我会尝试更改此行：

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

箭头功能，如下所示：

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