如何使用 @auth0/auth0-react 在 class 组件中获取 POST

Question

GET 提取将工作，但是当我尝试 POST 提取时，这是我看到的错误...

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

对于这一行... const { getAccessTokenSilently } = 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);

不确定 componentDidMount 是否是 GET 所必需的。但是认为 POST 的问题可能与渲染有关？我知道我不能在 didMount 中包含 newHandleSubmitToAddATournamentWithAuth，因为它需要一个事件参数。请帮忙！

Answer 1

我认为问题在于您没有将函数绑定到 this。 Class 中定义的方法不能访问 this 除非你将它们写成箭头函数（就像你的 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 newHandleSubmitToAddATournamentWithAuth = async (event) => {

箭头函数自动绑定并可以访问this

如何使用 @auth0/auth0-react 在 class 组件中获取 POST

How to fetch POST in a class component using @auth0/auth0-react

javascript

reactjs

auth0