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

Question

我正在使用 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 });
}
}

当我按下我用"Hell"标签手动编写的标签时，该功能被成功触发，并且能力"Hell"被推送到应用程序状态下的角色属性。但是，当我按下通过地图功能生成的任何其他标签时，会发生以下错误。我尝试了几种方法来解决这个问题，但没有任何帮助，我们将不胜感激！

Answer 1

我会尝试更改此行：

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

箭头函数，像这样：

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

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

Providing the same function to several React Native components not working

android

reactjs

react-native

native