React Native箭头函数与if语句使用问题求助

你遇到的核心问题其实是普通函数里的this指向错误，导致没法正确访问this.props，进而让if语句的逻辑完全不生效。结合你提到的箭头函数，我来帮你梳理清楚：

问题根源 #

你写的myFunction()是普通的类方法，在React组件中，这类方法默认不会绑定组件实例的this——也就是说，当你调用这个函数时，里面的this根本不是你的组件对象，自然读不到this.props.welcomeFlag，if判断也就成了无意义的逻辑。

解决方案：改用箭头函数定义方法 #

箭头函数的特性就是不会创建自己的this，而是继承外层作用域的this，在React组件类里，这意味着它会自动绑定组件实例的this，让你能正常访问props、state这些属性。

修改后的代码示例：

// 用箭头函数定义组件方法
myFunction = () => {
  console.log('Welcome Flag: ' + this.props.welcomeFlag);
  // 推荐用严格相等===做判断，避免类型隐式转换的坑
  if (this.props.welcomeFlag === false) {
    this.props.dispatch(setWelcomeFlag(true));
    showMessage('Welcome back, ' + this.props.userName + '!', {
      duration: 2000, // 补全你之前截断的配置示例
      type: 'success'
    });
  }
}

额外注意点 #

• 如果你坚持要用普通函数，也可以在组件构造函数里手动绑定this，比如：

  constructor(props) {
    super(props);
    this.myFunction = this.myFunction.bind(this);
  }
  
  myFunction() {
    // 这里的this就正确指向组件实例了
  }
  

• if语句本身的用法和普通场景没区别，问题出在this.props访问失败，导致判断条件永远不成立（或者拿到undefined），所以才会觉得“if语句有不同用法”。

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