React Native中Button的onPress调用this导致应用崩溃求助

嘿，刚学React Native就碰到这种闹心的问题太正常了！你说的点击提交后卡顿一分钟再崩溃，还没错误日志，结合你提到的this的问题，大概率是**this绑定错误导致了无限循环渲染**——这在RN新手里真的是高频坑！

我先给你捋捋最常见的两种错误场景，以及对应的解决办法：

1. 最容易踩的坑：直接调用函数而非传递引用 #

很多新手会不小心写成这样：

// ❌ 错误写法：直接调用handleSubmit，导致渲染时就执行函数
<Button onPress={this.handleSubmit()} title="提交" />

这种写法的问题是：组件渲染的时候就会立刻执行handleSubmit，如果handleSubmit里涉及到状态更新（比如setState），就会触发组件重新渲染，重新渲染又会再次执行handleSubmit，无限循环下去，直接把应用卡死崩溃，自然看不到错误日志。

✅ 正确写法应该是传递函数引用（不要加括号）：

<Button onPress={this.handleSubmit} title="提交" />

如果需要给handleSubmit传递参数，就用箭头函数包裹：

<Button onPress={() => this.handleSubmit(this.state.formValues)} title="提交" />

2. 类组件中this未正确绑定 #

如果你用的是类组件，handleSubmit方法里的this可能会因为绑定问题变成undefined，虽然这种情况通常会直接报错，但有时候RN的错误捕获机制可能没把日志打出来，也可能间接导致异常卡顿。

比如错误的类组件写法：

// ❌ 错误：handleSubmit里的this未绑定，调用时this是undefined
class RegisterScreen extends Component {
  state = { username: '', password: '' };

  handleSubmit() {
    console.log(this.state); // 这里this是undefined，会报错
  }

  render() {
    return <Button onPress={this.handleSubmit} title="提交" />;
  }
}

✅ 解决this绑定的三种方式：

• 构造函数绑定：

class RegisterScreen extends Component {
  constructor(props) {
    super(props);
    this.state = { username: '', password: '' };
    // 手动绑定this
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit() {
    console.log(this.state);
  }

  render() {
    return <Button onPress={this.handleSubmit} title="提交" />;
  }
}

• 箭头函数定义方法（推荐，最简洁）：

class RegisterScreen extends Component {
  state = { username: '', password: '' };

  // 箭头函数自动绑定当前组件的this
  handleSubmit = () => {
    console.log(this.state);
  }

  render() {
    return <Button onPress={this.handleSubmit} title="提交" />;
  }
}

• onPress里用箭头函数包裹：

class RegisterScreen extends Component {
  state = { username: '', password: '' };

  handleSubmit() {
    console.log(this.state);
  }

  render() {
    // 箭头函数里的this指向当前组件
    return <Button onPress={() => this.handleSubmit()} title="提交" />;
  }
}

如果是函数组件？ #

要是你用的是函数组件，那就完全不用纠结this的问题啦，直接用useState管理状态就行：

const RegisterScreen = () => {
  const [formValues, setFormValues] = useState({ username: '', password: '' });

  const handleSubmit = () => {
    console.log(formValues); // 直接用状态变量就行，不用this
  };

  return <Button onPress={handleSubmit} title="提交" />;
};

先检查第一种情况（是不是 onPress 里加了括号调用函数），这是最可能导致你卡顿崩溃的原因！

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