盡管有箭頭功能，但在 axios 中未定義“this”

Question

我收到錯誤：

元素類型無效：應為字符串（用於內置組件）或類/函數（用於復合組件）但得到：未定義

使用此代碼：

class Registration extends React.Component {

  state = {...}

  submitRegistration = e => {
      let registration = {...}

      Axios.post('/registration', registration)
        .then(res => {
          console.log("Successfully sent registration data", res)
        })
        .catch(() => {
          this.setState({ showNoServerConnectionAlert: true })
        });
    }
    e.preventDefault()
  }

  render() {
    return (
      ...
    )
  }

export default Registration;

問題是盡管我使用箭頭函數，但由於某種原因不能在 catch 塊中引用“this”。 我也嘗試過綁定“this”，但這也不起作用。 有人有想法嗎？

Answer 1

submitRegistration不應是箭頭 function。 通過使其成為箭頭 function，它沒有Registration class 實例的 scope。 將其更改為常規方法：

class Registration extends React.Component {

  state = {...}

  submitRegistration(e) {
      let registration = {...}

      Axios.post('/registration', registration)
        .then(res => {
          console.log("Successfully sent registration data", res)
        })
        .catch(() => {
          this.setState({ showNoServerConnectionAlert: true })
        });
    }
    e.preventDefault()
  }

  render() {
    return (
      ...
    )
  }

export default Registration;

Answer 2

因為每個代碼塊中的“this”可能有不同的含義並引用其他父級。 為了解決這個問題，你必須在全局 scope 中定義一個變量並使其等於這個。 然后在代碼的 rest 中，該變量可能是可訪問的。

    class Registration extends React.Component {
       state = {...}
       submitRegistration = e => {
      let registration = {...}
      var sellf = this;

      Axios.post('/registration', registration)
        .then(res => {
          console.log("Successfully sent registration data", res)
        })
        .catch(() => {
          sellf.setState({ showNoServerConnectionAlert: true })
        });
    }
    e.preventDefault()
  }

  render() {
    return (
      ...
    )
  }
export default Registration;