Redirect from async function in react?

Question

I have a function being called when a form is submitted which is like so:

import { API } from "aws-amplify";

export default (async function submitSite(values) {
  console.log(values);
  return API.post("sites", "/sites", {
    body: values
  })
});

After this function is done, how can I redirect to another page. I have tried using this.props.history.push and window.location.replace() after the api call but neither works.

Update

export default (async function submitSite(values) {

  try {
    await this.createSite({
      content: values
    });
    this.props.history.push("/");
  } catch (e) {
    alert(e);
  }

  createSite(site) {
    return API.post("notes", "/notes", {
      body: site
    });
  };
});

You can set a state in the component that holds your form like `submitted: false` and when you get a response from your API you change the state to true and in your render function do something like this.state.submitted ? : — Asaf Aviv, Apr 09 '19 at 11:09
Does this answer your question? [How to redirect in routes after async request?](https://stackoverflow.com/questions/71976758/how-to-redirect-in-routes-after-async-request) — Liam, May 25 '23 at 11:49

score 0 · Answer 1 · answered Apr 09 '19 at 11:29

0

When using an async function you can use await to wait for the promise to be resolved. You can then redirect using for example this.props.history.push('/path').

answered Apr 09 '19 at 11:29

Ana Goessens

36
5

If the linked documentation is not helpful you could try and see if the following is helpful: https://stackoverflow.com/questions/48487535/correct-way-to-handle-redirect-after-async-call This might help as an example for await. You could also use .then(). That would work in the following way: submitSite(values).then(result => doSomethingElse(result)) or submitSite(values).then(this.props.history.push('/path')) see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises – Ana Goessens Apr 09 '19 at 11:45
I have updated the question with my updated attempt – TiernO Apr 09 '19 at 11:52
Are you using the return value of API.post for anything? Are you getting a specific error? I can only do very limited tests myself right now, but this works for example for me: async function submitSite(x) { try { await createSite(x); print('this.props.history.push("/")') } catch (err) { console.log(err); } function createSite(site){ print(site) } } submitSite('site_example') – Ana Goessens Apr 09 '19 at 12:16
No, do I have to use the return value? – TiernO Apr 09 '19 at 12:18
No just curious – Ana Goessens Apr 09 '19 at 12:19
Ah right, I used this example because It was in a tutorial I was previously referencing. Also in the example you gave, their is no reference to the API.post call? I really appreciate you helping btw – TiernO Apr 09 '19 at 12:20
Yes I was trying to simplify it using print statements (because I dont have the actual functions you are calling), srry. Are there any error messages when you run your code? Maybe try: export default (async function submitSite(values) { try { await createSite({ content: values }); this.props.history.push("/"); } catch (e) { alert(e); } function createSite(site) { return API.post("notes", "/notes", { body: site }); }; }); – Ana Goessens Apr 09 '19 at 12:27
I get an alert saying "cannot read property of props undefined" – TiernO Apr 09 '19 at 12:46

Redirect from async function in react?

1 Answers1