0

I am having an odd issue that I cannot get past. My AJAX call via AXIOS is being called twice. I have read extensively, and even when I find "like" issues, Mine isn't solvable by using the answers on those posts, either because I am not using the methods they are, or because I am not using CROSS ORIGIN. I am also not using Strict Mode. I seriously am at a loss here!

root.render(
  //<React.StrictMode>
    <App />
  //</React.StrictMode>
);

    handleSubmit = event => {
        event.preventDefault();
        const data = {
            name: event.target.elements.name.value
        };

        axios.post(`/api/v2/users/add`, {data})
            .then(res => {
                console.log(res.data.user['name']);
            })
    };

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label>
                        Person Name:
                        <input type="text" name="name"/>
                    </label>
                    <button type="submit">Add</button>
                </form>
            </div>
        )
    }

The event fires twice. The first time it SENDS the payload .. The second time it RECEIVES the response. This is so strange! I have tried everything I know how. I have tried setting a state onChange() instead of statically setting the "name" field: name: event.target.elements.name.value. This is a basic 30 line app .. I really don't know what to look at next. Am I missing something glaring?

enter image description here

enter image description here

To be clear I have read the following posts and NONE are an answer to my question:

Every axios request firing twice in react-redux app? (I am not using Cross Origin.)

Events firing twice inside axios interceptor (Read this thinking maybe .. But not my issue)

React and Axios fires twice (once undefined, once successfully) (Not Changing State)

Zak
  • 6,976
  • 2
  • 26
  • 48

1 Answers1

0

I found that if you are using URL "directory" based APIs if you don't include the trailing slash, you will get a 301 redirect, with WILL NOT re-post your data .. So the Payload expires on the first trip, then the redirect receives NO payload, but gets the correct response MINUS the payloads parameters.

There IS a difference between

/api/v2/users/add

and

/api/v2/users/add/
Zak
  • 6,976
  • 2
  • 26
  • 48