componentDidMount（）中的“未定义”错误

Question

我得到一个TypeError：这是未定义的，当我在componentDidMount方法中使用它时，即使我相信我绑定了该方法。我是否错误地绑定了方法或是否存在其他问题？我试图使用两个箭头函数并将其绑定在构造函数中，但我得到相同的错误。

  constructor(...args) {

    super(...args);

    // this.handleSubmit = this.handleSubmit.bind(this);

    this.state = {

      email: null,

      address: null,

      address2: null,

      city: null,

      state: null,

      zip: null,

      subscribe: null,

      currentUser: null,

      displayName: null,

      uid: null,

    }

    this.handleChange = this.handleChange.bind(this);

    this.componentDidMount = this.componentDidMount.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);

  }

  componentDidMount = () => {

    firebaseRef.auth().onAuthStateChanged(function(user) {

      if (user) {

        [...]

        })

        this.setState({

          uid: user.uid,

          displayName: user.displayName});

        db.collection("testCollection").doc("handleSubmitTest8").set({

          // uid:this.state.uid,

          test: "testy",

        }).then(function() {

          console.log("Document written in handleSumit in NUM");

        })

        .catch(function(error) {

          console.error("Error adding document: ", error);

        });

      } else {

        console.log("no user signed in");

      }

    });

  }

  handleSubmit = (event) => {

    [...]

  }

  handleChange(event) {

   [...]

  }

  render() {

    return (...)}}```

Answer 1

我认为你做错了，因为你在componentDidMount（React的生命周期钩子方法）中使用了箭头函数。所以你不再需要这些代码 this.componentDidMount = this.componentDidMount.bind(this); // remove this one默认情况下，像ComponentDidMount这样的React的生命周期钩子已经具有此上下文。所以你需要将代码更改为此。componentDidMount() {}所以要明确你是否使用箭头功能不需要使用bind（this）