TouchableHighLight onPress внутри функции карты в реагировать родной

Question

У меня есть массив изображений, которые я хочу отобразить в компоненте в реагировать родной.
Я использую функцию карты, чтобы перебрать массив и отобразить его. У меня также есть кнопка удаления в верхней части изображения.
Соответствующий код:

      this.state.imgs.map(function(img,i){
        return (
          <View style={{alignItems:'center',justifyContent:'center', height:75, width:75, borderRadius:25}}>
            <Image style={{position:'absolute',resizeMode:'cover', top:0,left:0, borderRadius:38,height:75, width:75, opacity:0.5}} source={{uri: img.path }} />
            <TouchableHighlight onPress={() => this.removeItem(i)}>
              <Image style={{}} source={require('./Images/images_asset65.png')} />
            </TouchableHighlight>
          </View>
          );
      })

Проблема в TouchableHighlight, где у меня есть событие, когда оно срабатывает, я получаю сообщение об ошибке "this" (undefined не является функцией).
Я знаю, что это проблема масштаба, но я не могу понять это.
Правильно ли здесь использовать функцию стрелки?

Answer 1

Если вы хотите использовать this внутри вашей функции карты, вы должны перейти к функции стрелки, так this указывает на внешнюю сферу.

  this.state.imgs.map((img, i) => {
    return (
      <View style={{alignItems:'center',justifyContent:'center', height:75, width:75, borderRadius:25}}>
        <Image style={{position:'absolute',resizeMode:'cover', top:0,left:0, borderRadius:38,height:75, width:75, opacity:0.5}} source={{uri: img.path }} />
        <TouchableHighlight onPress={() => this.removeItem(i)}>
          <Image style={{}} source={require('./Images/images_asset65.png')} />
        </TouchableHighlight>
      </View>
      );
  })

Answer 2

Когда вы используете function ключевое слово в вашем коде, то вы теряете контекст и function создает свое. Если вы используете function лучше не забывать связывать эти функции с bind(this) так что эти функции имеют общий контекст. Таким образом, в вашем соответствующем коде вы должны изменить свою последнюю строку на }.bind(this)), Лучше помнить, используя bind(this) как-то при использовании function ключевое слово, даже лучший вариант не использует function и палка с вкусностями идет с ES6. Последнее, но не менее важное, всегда следует читать документы.