ReactJs componentDidMount fetch url перезапись формы отправить fetch url - PullRequest
Новая
       71

ReactJs componentDidMount fetch url перезапись формы отправить fetch url

0 голосов
/ 26 мая 2020

В моем компоненте он начинается с жизненного цикла componentDidMount (), который выбирает данные для отображения в таблице. 

componentDidMount() {
        fetch(TABLE_DATA, { 
        //TABLE_DATA is a global variable that runs a callback which combines the rest of the variable
        //to the url. It's mostly for deployment; an easy way to change urls back and forth. 
            credentials: 'include',
            methods: 'GET',
            headers: {
                'Content-type': 'application/json',
            },
        })
        .then(res => res.json())
        .then(data=>{
            this.setState({
                tableData: data,
                isLoaded: true
            })
        })
   }

Теперь, когда я хочу отправить некоторую информацию в форме в том же компоненте, для по какой-то причине переменная TABLE_DATA переопределяет любой URL-адрес, который я получаю. Вот код для отправки формы: 

    submitAccountToUser= e => {
        e.preventDefault()
        fetch(EXTRA_INFO, {
            credentials: 'include',
            methods: 'POST',
            headers: {'Content-type': 'application/json'},
            body: JSON.stringify({
                'info':this.state.info
            })
        })
        .then(res => console.log('res', res)) 
        //doesn't get to this console.log. It stops on the line with "fetch(EXTRA_INFO
    }

EXTRA_INFO перезаписывается как TABLE_DATA. На моем локальном сервере / терминале он показывает, что по URL-адресу TABLE_DATA вызывается метод GET. Наряду с этой ошибкой в ​​моем браузере:

Необработанное отклонение (TypeError): не удалось выполнить 'fetch' в 'Window': запрос с методом GET / HEAD не может иметь тело.

Это имеет смысл, поскольку первоначальный вызов выборки (TABLE_DATA) является только запросом GET и не может иметь тела. Но он даже не должен получать данные по этому URL. Я старался не усложнять задачу, ища синтаксические ошибки и проверяя URL-адреса в своих глобальных переменных. Но я не понимаю, почему он полностью игнорирует значение EXTRA_INFO.

** EDIT ** Функция обратного вызова, из которой TABLE_DATA и EXTRA_INFO получают свои api, выглядит следующим образом: 

const TABLE_DATA = backend_route('/tableinfo')

const backend_route = (route) => {
    const backend = 'http://127.0.0.1:5000'
    return backend + route
}

1 Ответ

0 голосов
/ 27 мая 2020

Проблема оказалась в моем методе отправки отправки. У меня было 'методы' вместо 'method' .

Глупый я. Но мне показалось странным, как отреагировал на эту ошибку

...