React Native问题：this.setState仅在第二次点击后更新

嘿，作为React新手碰到这种问题太正常啦！我刚学React的时候也踩过类似的坑～这个“首次点击返回undefined、后续正常”的bug，大概率是方法的this绑定问题，或者是方法依赖的数据没初始化完成导致的，给你几个具体的排查和解决办法：

最可能的原因：方法的this绑定错误 #

你代码里的onPress={this.props.findPlace}，这个findPlace是父组件传过来的方法吧？如果父组件里定义这个方法时没正确绑定this，首次调用时this会指向undefined（严格模式下），导致方法里依赖this.state或this.props的逻辑出错，返回undefined；而后续点击可能因为React的更新机制，this被隐式绑定了，所以又正常了。

解决办法（父组件中调整）： #

• 办法1：构造函数里手动绑定this
  在父组件的构造函数里给findPlace绑定上下文，这是类组件的标准做法：

  constructor(props) {
    super(props);
    // 绑定this到组件实例
    this.findPlace = this.findPlace.bind(this);
  }
  
  findPlace() {
    // 现在这里的this会正确指向父组件实例，能正常访问this.state/this.props
  }
  

• 办法2：用箭头函数定义方法
  箭头函数会自动绑定当前上下文，新手友好，不用手动写bind：

  // 直接用箭头函数定义类方法
  findPlace = () => {
    // 这里的this稳定指向父组件实例
    console.log(this.state.someValue); // 不会再undefined啦
  }
  

另一种可能：依赖的数据未初始化 #

如果findPlace方法里用到了某些需要异步加载的数据（比如从API请求的内容、需要在componentDidMount里初始化的state），首次点击时数据还没准备好，就会返回undefined；后续点击时数据已经加载完成，所以正常工作。

解决办法： #

• 在方法里加数据检查，确保数据存在再执行逻辑：

  findPlace = () => {
    // 先判断数据是否存在
    if (!this.state.targetData) {
      console.log('数据还没准备好哦');
      return;
    }
    // 这里执行正常逻辑
  }
  

• 或者在数据加载完成前，把按钮设为禁用状态：

  <TouchableOpacity 
    onPress={this.props.findPlace} 
    style={styles...}
    disabled={!this.props.targetData}
  >
    {/* 按钮内容 */}
  </TouchableOpacity>
  

临时应急：在当前组件用箭头函数包裹调用 #

如果暂时不想动父组件的代码，也可以在当前组件的onPress里用箭头函数包裹，强制绑定调用时的上下文：

<TouchableOpacity onPress={() => this.props.findPlace()} style={styles...}>

不过这个写法每次渲染都会创建新的函数，对性能影响极小，但如果是列表里的按钮这种频繁渲染的组件，还是优先用前面两种方法哦～

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