Javascript 如何使用@auth0/auth0在类组件中获取POST

GET-fetch可以工作，但当我尝试后期获取时，我看到的是错误

未处理的拒绝（TypeError）：无法读取未定义的属性“props”

对于这一行。。。 const{getAccessTokenInquirement}=this.props.auth0

import React, { Component } from 'react'
import { IP } from '../constants/IP'
import { withAuth0 } from '@auth0/auth0-react';

class AddATournament extends Component {

    componentDidMount() {
        this.myNewListOfAllTournamentsWithAuth()
    }

    state = {
        tournament_name: '',
        all_tournaments: [],
    }

    async myNewListOfAllTournamentsWithAuth() {
        const { getAccessTokenSilently } = this.props.auth0;
        const token = await getAccessTokenSilently({
          audience: `http://localhost:3000`,
          scope: 'read:tournaments',
        });

        fetch(`http://${IP}:3000/tournaments`, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        })
        .then(res => res.json())
        .then(data => this.setState({
            all_tournaments: data
        }))
    } 
    
    onChange = (e) => {
        this.setState({
            tournament_name: e.target.value
        })
    }

    async newHandleSubmitToAddATournamentWithAuth (event) {
        const { getAccessTokenSilently } = this.props.auth0;
        const token = await getAccessTokenSilently({
        audience: `http://localhost:3000`,
        scope: 'create:tournaments',
        });

        fetch(`http://${IP}:3000/tournaments`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accepts': 'application/json',
                Authorization: `Bearer ${token}`
            },
            body: JSON.stringify({tournament_name: this.state.tournament_name,
            })
        })
    }

  render() {
   console.log("show me all tournaments", this.state.all_tournaments)

    return (
        <div className="App">
            <h2> Add A New Tournament
                {
                    <form onSubmit={this.newHandleSubmitToAddATournamentWithAuth}>
                        <br></br><label>
                        Tournament Name: 
                        <input 
                            onChange={this.onChange} 
                            type='text' tournament_name='tournament_name' 
                            value={this.state.tournament_name} />
                        </label>
                        <input type='submit' value='submit' />
                    </form>
                }
            </h2>
     )
  }
}

export default withAuth0(AddATournament);

import React，{Component}来自“React”
从“../constants/IP”导入{IP}
从'@auth0/auth0'导入{withAuth0}；
类AddAtournance扩展了组件{
componentDidMount（）{
这个.myNewListofAllTourntsWithAuth（）的
}
状态={
您的姓名：''，
所有锦标赛：[]，
}
异步myNewListOfAllTournamentsWithAuth（）{
const{getAccessTokenInquirement}=this.props.auth0；
const token=静默等待GetAccessToken({
观众：`http://localhost:3000`,
范围：“阅读：锦标赛”，
});
fetch（`http://${IP}:3000/tournaments`{
标题：{
授权：`Bearer${token}`，
},
})
.then（res=>res.json（））
.然后（数据=>this.setState({
所有巡回赛：数据
}))
} 
onChange=（e）=>{
这是我的国家({
比赛名称：e.target.value
})
}
异步NewHandleSubmitLoadDaTourNamentWithAuth（事件）{
const{getAccessTokenInquirement}=this.props.auth0；
const token=静默等待GetAccessToken({
观众：`http://localhost:3000`,
范围：“创建：锦标赛”，
});
fetch（`http://${IP}:3000/tournaments`{
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”，
授权：`Bearer${token}`
},
body:JSON.stringify（{tournament\u name:this.state.tournament\u name，
})
})
}
render（）{
console.log（“显示所有锦标赛”，this.state.all_锦标赛）
返回(
添加一个新的锦标赛
{



比赛名称：
}
)
}
}
使用auth0导出默认值（AddATournament）；

---

不确定GET是否需要componentDidMount。但是你认为这篇文章的问题可能与渲染有关吗？我知道我不能在didMount中包含newHandleSubmitLoadDaTourNamentWithAuth，因为它接受一个事件参数。请帮忙

我认为问题在于你没有将你的函数绑定到

这个

。类中定义的方法无权访问

此

，除非您将它们作为箭头函数编写（如

onChange

），或者如果您希望将它们作为函数编写，则需要在构造函数中绑定它们。考虑这个解决方案：

constructor() {
    super()

    this.state = {
      tournament_name: '',
      all_tournaments: [],
    }

    this.mymyNewListOfAllTournamentsWithAuth = this.mymyNewListOfAllTournamentsWithAuth.bind(this)
    this.newHandleSubmitToAddATournamentWithAuth = this.newHandleSubmitToAddATournamentWithAuth.bind(
      this
    )
  }

如果要在构造函数中避免这种情况，可以如下修改函数：

const myNewListOfAllTournamentsWithAuth=async（）=>{…

const newhandlesubmittoudataournamentwithauth=async（事件）=>{

---

Arrow函数是自动绑定的，可以访问

此

我认为问题在于您没有将函数绑定到

此

。类中定义的方法无权访问

此

，除非您将它们作为Arrow函数编写（如

onChange

）或者，如果您想将它们写入函数，则需要将它们绑定到构造函数中。

constructor() {
    super()

    this.state = {
      tournament_name: '',
      all_tournaments: [],
    }

    this.mymyNewListOfAllTournamentsWithAuth = this.mymyNewListOfAllTournamentsWithAuth.bind(this)
    this.newHandleSubmitToAddATournamentWithAuth = this.newHandleSubmitToAddATournamentWithAuth.bind(
      this
    )
  }

如果要在构造函数中避免这种情况，可以如下修改函数：

const myNewListOfAllTournamentsWithAuth=async（）=>{…

const newhandlesubmittoudataournamentwithauth=async（事件）=>{

箭头函数自动绑定，并可访问此