How to called async function in useEffect after submiting in react native?

Question

I would like once the user click on the submit button for the whole "page" to reload and the useEffect function to be called. The current behavior is that when the user clicks the submit button, the useEffect function is not called at all. It is as if it does not reload directly after submission. I don't know if this is due to async and await. I give you the code :

useEffect() :

useEffect(() => {

    console.log('test useEffect');

    (async () => {
      try {
        const value = await AsyncStorage.getItem('authToken_Lust');
        if(value !== null) {
          const decodedValue = jwt_decode(value);
          const current_time = Date.now() / 1000;
          if(decodedValue.exp < current_time) {
            setMessage('Vous n\'êtes plus connecté(e).')
          } else {
            setMessage('Vous êtes connecté(e)');
          }
        }
      } catch(err) {
        console.log(err);
      }
    })();

  }, []);

The code of the function called after the user clicks submit :

const onSubmit = async () => {
    setLoading(true)
    await fetch('http://192.168.1.36:3000/api/users/login', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email: email,
        password: password
      })
    })
    .then((response) => response.json())
    .then(async (res) => {
      if(res.error) {
        setMessage(res.error);
      } else {
        try {
          await AsyncStorage.setItem('authToken_Lust', res.token);
        } catch (err) {
          console.log(err);
        }
      }
    })
    .catch((err) => console.log(err))
    .finally(() => setLoading(false));
  }

Tanks

RobC · Accepted Answer · 2021-02-09 16:42:14Z

1

Create a state variable to indicate that credentials have been successfully submitted (within this component).
```
const [submitted, setSubmitted] = useState(1);
```
Alter this state variable whenever you get a response from your api in onSubmit (to somehow update the component):
```
try {
    await AsyncStorage.setItem('authToken_Lust', res.token);
    setSubmitted(submitted+1);
}
```
Remove the dependency array from your useEffect altogether or change it to respond to submitted value changes;
```
useEffect(() => {
    // ...
}, [submitted]);
```

edited Feb 9, 2021 at 16:42

RobC

25.3k21 gold badges87 silver badges88 bronze badges

answered Jan 18, 2021 at 19:58

k-wasilewski

4,6914 gold badges18 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Taghi Khavari · Accepted Answer · 2021-01-18 19:54:39Z

1

you need to make these changes to your codes:

const onSubmit = () => {
  setIsSubmitted(true);
  setLoading(true);
  fetch("http://192.168.1.36:3000/api/users/login", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      email: email,
      password: password,
    }),
  })
    .then((response) => response.json())
    .then(async (res) => {
      if (res.error) {
        setMessage(res.error);
      } else {
        try {
          await AsyncStorage.setItem("authToken_Lust", res.token);
        } catch (err) {
          console.log(err);
        }
      }
    })
    .catch((err) => console.log(err))
    .finally(() => setLoading(false));
};

const asyncEffect = async () => {
  try {
    const value = await AsyncStorage.getItem("authToken_Lust");
    if (value !== null) {
      const decodedValue = jwt_decode(value);
      const current_time = Date.now() / 1000;
      if (decodedValue.exp < current_time) {
        setMessage("Vous n'êtes plus connecté(e).");
      } else {
        setMessage("Vous êtes connecté(e)");
      }
    }
  } catch (err) {
    console.log(err);
  }
};

useEffect(() => {
  if (isSubmitted) {
    console.log("test useEffect");
    asyncEffect();
  }
}, [isSubmitted]);

answered Jan 18, 2021 at 19:54

Taghi Khavari

6,6173 gold badges21 silver badges36 bronze badges

1 Comment

user15026148 Over a year ago

I made the changes by adding an isSubmitted state but when the user submits the useEffect is still not called. I even get on the console a 'useEffect test' when I save the file while the isSubmitted is not changed.

user15026148 · Accepted Answer · 2021-01-18 20:16:03Z

I changed all my code taking into account your advice that gives :

const [submitted, setSubmitted] = useState(1);

useEffect(() => {
    console.log("test useEffect");
    asyncEffect();
  }, [submitted]);

  const asyncEffect = async () => {
    try {
      const value = await AsyncStorage.getItem("authToken_Lust");
      if (value !== null) {
        const decodedValue = jwt_decode(value);
        const current_time = Date.now() / 1000;
        if (decodedValue.exp < current_time) {
          setMessage("Vous n'êtes plus connecté(e).");
        } else {
          setMessage("Vous êtes connecté(e)");
        }
      }
    } catch (err) {
      console.log(err);
    }
  };

  const onSubmit = () => {
    setSubmitted(submitted+1);
    setLoading(true);
    fetch("http://192.168.1.36:3000/api/users/login", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: email,
        password: password,
      }),
    })
    .then((response) => response.json())
    .then(async (res) => {
      if (res.error) {
        setMessage(res.error);
      } else {
        try {
          await AsyncStorage.setItem("authToken_Lust", res.token);
        } catch (err) {
          console.log(err);
        }
      }
    })
    .catch((err) => console.log(err))
    .finally(() => setLoading(false));
  };

When I click on the submit button, the console log works fine (I get "test useEffect" on console) but the asyncAffect() function does not seem to be called. The setMessage in asyncEffect () don't change at all.

Collectives™ on Stack Overflow

How to called async function in useEffect after submiting in react native?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related