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

默认情况下，React的默认生命周期挂钩（例如componentDidMount）已经具有此上下文。因此，您需要将代码更改为此。

componentDidMount() {

}

因此请清楚，如果您使用的是箭头功能，则无需使用bind（this）

Answer 2

componentDidMount() {
    firebaseRef.auth().onAuthStateChanged(user => {
        // your code
    })
}

如果您不熟悉JavaScript中的this，只需在各处使用箭头功能即可。

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

2 个答案: