Firebase推送在componentDidMount中正常，自定义函数中无法工作

这个问题本质是函数里的this没有指向你的组件实例，在React类组件中，普通的自定义函数默认不会自动绑定组件的this，所以调用时this是undefined，自然读不到state里的内容。下面给你几个常用的解决方案：

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

这是最传统的方式，在组件的构造函数里把自定义函数的this绑定到组件实例上：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { UserInput: '测试内容' };
    // 关键：绑定函数的this到组件实例
    this.handleFunction = this.handleFunction.bind(this);
  }

  handleFunction() {
    // 现在this能正确指向组件，访问state没问题
    console.log(this.state.UserInput);
  }

  render() {
    return <button onClick={this.handleFunction}>触发函数</button>;
  }
}

方案2：用箭头函数定义自定义函数 #

箭头函数会自动捕获当前上下文的this（也就是组件实例），不需要手动绑定，写法更简洁：

class YourComponent extends React.Component {
  state = { UserInput: '测试内容' };

  // 用箭头函数定义，this自动指向组件实例
  handleFunction = () => {
    console.log(this.state.UserInput);
  }

  render() {
    return <button onClick={this.handleFunction}>触发函数</button>;
  }
}

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

如果不想修改函数定义，可以在调用的地方用箭头函数包裹一层，临时指定this的指向：

class YourComponent extends React.Component {
  state = { UserInput: '测试内容' };

  handleFunction() {
    console.log(this.state.UserInput);
  }

  render() {
    // 箭头函数会把this指向组件实例，再调用你的自定义函数
    return <button onClick={() => this.handleFunction()}>触发函数</button>;
  }
}

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

如果你用的是React函数组件，根本不需要this.state，直接用useState钩子创建的状态变量即可：

import { useState } from 'react';

function YourComponent() {
  const [userInput, setUserInput] = useState('测试内容');

  const handleFunction = () => {
    // 直接访问状态变量，不用this
    console.log(userInput);
  }

  return <button onClick={handleFunction}>触发函数</button>;
}

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