React-Redux中无法访问this.props.cameraTypeChanged的问题

这个问题我之前开发的时候也碰到过，核心原因是**flipCamera函数的this上下文丢失**了——当你把this.flipCamera直接传给TouchableOpacity的onPress属性时，函数执行时的this不再指向组件实例，导致this.props变成undefined，自然就调用不了cameraTypeChanged方法了。

下面给你三种可行的解决方案，你可以根据自己的习惯选择：

方案一：在构造函数中绑定this #

这是比较传统的方式，通过bind手动把函数的this绑定到组件实例：

class Photo extends Component { 
  constructor(props) {
    super(props);
    // 绑定this到flipCamera函数
    this.flipCamera = this.flipCamera.bind(this);
  }

  flipCamera() { 
    console.log("flip camera"); 
    this.props.cameraTypeChanged('back'); 
  } 

  // 后面的render代码不变...
}

方案二：用箭头函数定义方法 #

ES6+的箭头函数会自动继承当前上下文的this，这样就不用手动绑定了，写法更简洁：

class Photo extends Component { 
  // 直接用箭头函数定义flipCamera
  flipCamera = () => { 
    console.log("flip camera"); 
    this.props.cameraTypeChanged('back'); 
  } 

  // 后面的render代码不变...
}

方案三：在onPress中用箭头函数包裹 #

这种方式不需要修改flipCamera的定义，直接在onPress里用箭头函数调用它，确保this指向正确：

<TouchableOpacity 
  style={{ flex: 0.1, alignSelf: 'flex-end', alignItems: 'center', }} 
  onPress={() => this.flipCamera()} // 这里用箭头函数包裹
>
  <Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}> {' '}Flip{' '} </Text>
</TouchableOpacity>

小提示 #

• 方案一和方案二的性能更好，因为不会在每次render时创建新的函数；
• 方案三虽然简单，但每次组件渲染都会生成新的箭头函数，在复杂列表场景下可能有微小的性能影响，不过大部分普通场景完全可以用。

你可以随便选一种试试，应该就能解决undefined is not an object的报错了。

内容的提问来源于stack exchange，提问作者Adam Duffield