React Native中map生成的Tag组件调用handleAbility函数报错求助

嘿，我一眼就发现你遇到的两个核心问题啦，咱们一步步来解决：

1. TypeError的根源：map里的this指向错误 #

你在this.state.abilities.map里用了普通的function，这会导致函数内部的this不再指向你的组件实例，所以调用this.handleAbility时自然会找不到这个方法，触发TypeError。

解决方案：把map里的普通函数换成箭头函数 #

箭头函数会继承外部的this指向，这样就能正确访问到组件的handleAbility方法了。修改后的渲染代码如下：

<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
  <Tag onChange={() => this.handleAbility('Hell')} style={{ marginRight: 7 }}> Hell </Tag>
  {this.state.abilities.map((ability) => (
    <Tag 
      onChange={() => this.handleAbility(ability.label)} 
      style={{ marginRight: 7 }}
      key={ability.label} {/* 别忘了加key属性，React列表渲染要求哦 */}
    > 
      {ability.label} 
    </Tag>
  ))}
</ScrollView>

另外注意给map生成的Tag加上key属性，这是React列表渲染的必填项，能提升性能避免警告。

2. 隐藏的逻辑bug：pop()不是删除指定标签的正确方式 #

你当前的handleAbility里，当标签已存在时用character.abilities.pop()，这会删除数组最后一个元素，而不是你点击的那个标签，逻辑完全不对！比如你先加了A、B、C，点击B的话，会删掉C而不是B。

修正后的handleAbility函数： #

用filter方法来过滤掉指定的label，这样就能精准删除对应的能力标签了：

handleAbility = (label) => {
  let character = Object.assign({}, this.state.character);
  if (!character.abilities.includes(label)) {
    // 如果不存在就添加
    character.abilities.push(label);
  } else {
    // 如果存在就过滤掉该标签
    character.abilities = character.abilities.filter(ability => ability !== label);
  }
  this.setState({ character });
}

我把indexOf == -1换成了更直观的!includes，逻辑是一样的，但可读性更好。

验证效果 #

现在再点击map生成的标签，应该不会再触发TypeError，而且添加/删除标签的逻辑也完全正确啦～

内容的提问来源于stack exchange，提问作者A.A