React中如何在函数内绑定this？Firebase场景下问题求助

嘿，我帮你搞定这个this为null的问题！在React里处理异步操作（比如你用Firebase检查投票状态）时，很容易遇到上下文丢失导致this变成null的情况，下面给你几种实用的解决办法：

方法1：在构造函数中手动绑定this #

这是比较经典的处理方式，在组件的构造函数里把你的投票检查函数和组件实例的this绑定起来，确保函数内部能正确访问到组件的props：

constructor(props) {
  super(props);
  // 绑定你的投票检查函数到组件实例
  this.checkVotingCompletion = this.checkVotingCompletion.bind(this);
}

checkVotingCompletion() {
  // 这里写Firebase查询用户投票状态的逻辑
  if (/* 用户已完成投票的判断条件 */) {
    this.props.history.push('/thanks');
  }
}

方法2：用箭头函数定义处理函数 #

箭头函数会自动继承外层作用域的this，不用手动绑定，写法更简洁：

// 直接用箭头函数定义你的检查函数
checkVotingCompletion = () => {
  // Firebase 查询逻辑...
  if (用户已完成投票) {
    this.props.history.push('/thanks');
  }
}

这种方式现在在React类组件里很常用，省去了构造函数里绑定的步骤。

方法3：调用函数时用箭头函数包裹 #

如果你的检查逻辑是在Firebase的回调或者事件监听里执行的，也可以在调用时用箭头函数包裹，确保上下文正确：

// 举个Firebase回调的例子
firebase.firestore().collection('votes').doc(currentUserId).onSnapshot((doc) => {
  if (doc.exists && doc.data().isCompleted) {
    // 这里的this会正确指向组件实例
    this.props.history.push('/thanks');
  }
});

要是是按钮点击这类事件，也可以这么写：

<button onClick={() => this.checkVotingCompletion()}>检查投票状态</button>

额外提醒：如果是函数组件的情况 #

要是你用的是React函数组件，那本身就没有this，这时候需要用useHistory钩子来获取路由的history对象：

import { useHistory } from 'react-router-dom';

function VoteCheckComponent() {
  const history = useHistory();

  const checkVotingCompletion = () => {
    // Firebase 查询逻辑...
    if (用户已完成投票) {
      history.push('/thanks');
    }
  };

  // 组件渲染逻辑...
}

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