Как получить POST в компоненте класса с помощью @ auth0 / auth0-react - PullRequest
Новая
       53

Как получить POST в компоненте класса с помощью @ auth0 / auth0-react

1 голос
/ 06 августа 2020

GET-выборка будет работать, но когда я пытаюсь выполнить POST-выборку, я вижу эту ошибку ...

Необработанное отклонение (TypeError): не удается прочитать свойство 'props' из undefined

для этой строки ... 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 может иметь какое-то отношение к рендерингу? Я знаю, что не могу включить newHandleSubmitToAddATournamentWithAuth в didMount, потому что он принимает параметр события. Пожалуйста, помогите!

1 Ответ

0 голосов
/ 06 августа 2020

Думаю, проблема в том, что вы не привязываете свои функции к this. Методы, определенные в вашем классе, не имеют доступа к 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

...