Question

我有一系列图像，我想在反应原生的组件中显示我使用map函数迭代数组并显示它。我的图像顶部还有一个删除按钮相关代码是：

      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，我有一个事件，当事件发生时我得到一个关于＆＃34的错误;这个＆＃34; （未定义不是函数）。
我知道这是一个范围问题，但我无法弄明白。
这里使用箭头功能是否正确？

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附带的好东西。最后但并非最不重要的一个应该始终阅读docs.

TouchableHighLight onPress里面的map函数反应原生

2 个答案: