0

In my component, it starts with a componentDidMount() lifecycle that fetches data to display on a table.

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
            })
        })
   }

Now when I want to submit some information on a form in the same component, for some reason, the TABLE_DATA variable overrides whatever url I'm fetching with. Here is the code for submitting the form:

    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 is overwritten as TABLE_DATA. It shows on my local server/terminal that there is a 'GET' method being called at the TABLE_DATA url. Along with this error in my browser:

Unhandled Rejection (TypeError): Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.

Which makes sense since the initial fetch call (TABLE_DATA) is only a 'GET' request and cannot have a body. But it shouldn't even be fetching for that URL. I've kept it simple by looking for syntax errors and checking the URL's in my global variables. But I don't understand why it would completely ignore EXTRA_INFO's value.

** EDIT ** The callback function that TABLE_DATA and EXTRA_INFO get their api's from looks like this:

const TABLE_DATA = backend_route('/tableinfo')

const backend_route = (route) => {
    const backend = 'http://127.0.0.1:5000'
    return backend + route
}
2
  • How are TABLE_DATA and EXTRA_INFO defined? (if you're concerned, you can obfuscate private details of the URLs) May 26, 2020 at 7:40
  • @SebastianB. I edited the bottom of my post to answer your question. Hope this helps
    – smcg
    May 26, 2020 at 22:04

1 Answer 1

0

The problem turned out to be on my submit fetch method. I had 'methods', instead of 'method'.

Silly me. But I found it weird how react responded to that error

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.