How to pass updated set State value in axios request as params

Question

I'm a beginner in react native, I'm trying to get user information from mysql database through an axios API get request.

Once logged in, I stored email address in AsyncStorage and later want to use that email address from AsyncStorage as params or parameters to get the user details.

I wrote a code which set initial state of the setState as 'na'. Please help me how I can pass the email address from AsyncStorage as params or parameters.

Here is my code.

// to load email address
  const [SessionEmail, setSessionEmail] = useState('na');

// to load users info
  const [users, setUsers] = useState([]);

  useFocusEffect(
    React.useCallback(() => {   
      getUsername();
      getUsersInfoFromAPI();
    }, [])
  );

// to get the session username from localstorage
  const getUsername = async () => {
    try {
      const username = await AsyncStorage.getItem('Username')
      if (username !== null) {
        setSessionEmail(username);
      }
    } catch (e) {
      console.log(e);
    }
  }

 // API Calling user details
  const getUsersInfoFromAPI = async () => {
    await axios.get(`https://myapi.co.in/api/user/?email=${SessionEmail}`)
      .then(response => {
        setUser(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }

After the page is rendered, and I load page from metro, I can see the parameters have been sent to server.

Have you tried in this way? https://stackoverflow.com/a/45186956 — Yakupguly Malikov, Dec 31 '22 at 11:54
@YakupMalikov Well, yes I tried that but it is on button click. However, here I'm trying to send updated set state value in axios parameters to get details based on that parameters. I'm new to react, my backend is mysql. Hence, for where clause I need username sent to API which is PHP. Once API gets username it fetch user details. setState did get updated with asyncstorage value but not passed into axios parameters. — Mohsin S S, Dec 31 '22 at 14:32

score 2 · Accepted Answer · answered Dec 31 '22 at 16:57

Update your code in this way:

useFocusEffect(
    React.useCallback(() => {   
      getUsername();
    }, [])
  );

Instead of saving your email to state, sent it to function directly but if you are using it for other reason you can still save it but call function while getting username from AsyncStorage with username parameter like below.

// to get the session username from localstorage
  const getUsername = async () => {
    try {
      const username = await AsyncStorage.getItem('Username')
      if (username !== null) {
        getUsersInfoFromAPI(username);
      }
    } catch (e) {
      console.log(e);
    }
  }

// API Calling user details
  const getUsersInfoFromAPI = async (email) => {
    await axios.get(`https://myapi.co.in/api/user/?email=${email}`)
      .then(response => {
        setUser(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }

Thank you so much it worked. I'm able to send AsyncStorage value to API. I really appreciate your efforts and help. — Mohsin S S, Dec 31 '22 at 17:27

score 1 · Answer 2 · answered Dec 31 '22 at 15:40

1

const [users, setUsers] = useState([]);

here you can use like this

  const [users, setUsers] = useState();

hope this will help you

answered Dec 31 '22 at 15:40

Yes, I did make changes to it. Initial value I set as na. const [users, setUsers] = useState('na'); – Mohsin S S Dec 31 '22 at 15:49
you can also use as () blank it's working or not ? – Dec 31 '22 at 15:58
No it's not working, value is not being sent to params. await axios.get(`https://myapi.co.in/api/user/?email=${SessionEmail}`) But it get's rendered and displayed in textview When I save the page from VSC, it's sends in params – Mohsin S S Dec 31 '22 at 16:04

How to pass updated set State value in axios request as params

2 Answers2