Reactjs function responding not quick enough?

Curriculum Help
1

I have create a function that uploads a image wist axios allong with text to my API
everything works fine. but after i have uploaded it i direclty I want to call the “getData()” function to direclty show the new created data in a table. but its not working direclty after

Upload code:

onFileUpload = () => {
        const formdata = new FormData();
        formdata.append(
            "productFile.File",
            this.state.FileSelect,
            this.state.FileSelect.name
        );

        formdata.append("productFile.Title", this.state.Title);
        formdata.append("productFile.Description", this.state.Description);
        formdata.append("productFile.Price", this.state.Price);
        formdata.append("productFile.Quantity", this.state.quantity);


        console.log(this.state.FileSelect);

        axios.post("api/Upload", formdata);

        this.getData();

the getData() function:

    async getData() {
       const url = 'api/Upload/';
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
        this.setState({
            allproducts: data,
            loading: false
        });
    }

when i refresh the page it works fine and i see the new data because i use “componentDidMount()” with the getData function:

    componentDidMount() {
        this.getData();
    }

why does it not work on the "onFileUpload " as well
is it because the data has not been uploaded yet when i call the “getData”
function. How do i solve this?

2

Right, so the POST call is asynchronous. In other words, there is no guarantee when it will be done. It will happen “later”. Because of that, JS will just move onto the next instruction, it won’t wait.

If you need that data, you need to handle it after you know that the POST is returned. If I remember correctly, that function returns a Promise, meaning you can either handle it with a Promise or with async/await.

3

Here are some examples on how to handle an async call. The only difference is that you need to chain them, but that should be easy to find with a google search.

4

yes i got it to work thank you.
but i have a question:

working code:

    onFileUpload = async () => {

        const formdata = new FormData();
        formdata.append(
            "productFile.File",
            this.state.FileSelect,
            this.state.FileSelect.name
        );

        formdata.append("productFile.Title", this.state.Title);
        formdata.append("productFile.Description", this.state.Description);
        formdata.append("productFile.Price", this.state.Price);
        formdata.append("productFile.Quantity", this.state.quantity);


        console.log(this.state.FileSelect);
        const resp = await axios.post("api/Upload", formdata);


        this.getData();

    }

how did it work when the “resp” has never been called?:

   const resp = await axios.post("api/Upload", formdata);

I thought you always have to call a variables
before it actually does something

5

It’s the return value of the function you’re assigning to resp, you’re still calling the function. You could have just written

await axios.post("api/Upload", formdata);
6

As I believe we’ve discussed in other threads, I respectfully suggest that you could benefit from brushing up on your basic JavaScript.