Question 233262 in React native Question posted in
The official React Native documentation can be found here.

AsyncStorage key value not able retrieve in react native

I am storing both username and password as key value async storage from main component.
In below component i am retrieving username and password from asyncstorage and stored as state and pass them to authentication for axios. But some how value received using state are always undefined. I have notice through logs that i am retrieving correct value from asyncstorage. So despite assigning value to usestate ,i am receiving undefined value.
when i store both username and password in a variable and passed to axios ,it does works.

Any help would be highly appreciated

function Home(props) {
  const [username,setUsername]=useState();
  const [password,setPassword]=useState();
  const usernames ="abc";
  const passwords="123";

  const getData = async () => {
    try {
      const  value1 = await AsyncStorage.getItem("login");
      const value2 = await AsyncStorage.getItem("password");

      setUsername(value1);
      setPassword(value2);
      console.log("retrieved value from async storage  ",value1,value2 ); //both value are retrieved correctly 


      
    } catch (e) {
      // error reading value
    }
  };

  useEffect(() => {

    getData();
    console.log("stored value ",username,password ); // state value as undefined 

    axios
      .post("https://........", {
        auth: {
          username:username,
          password:password,
        },
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  }, [username,password]);
}
Tags:

2

Answers


  1. 0

    you aren’t calling getData(), also only do your axios request once the username and password have been set to truethy values

    useEffect(() => {
    if(!username) return;
    if(!password) return;
    console.log("stored value ",username,password ); // state value as undefined 
    axios
    .post("https://........", {
      auth: {
        username:username,
        password:password,
      },
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  }, [username,password]);

  useEffect(()=>{
    getData();
  }, []);
    Login or Signup to reply.
  2. 0

    A solution is to move the axios request inside another useEffect that only runs when the username and password are updated:

    function Home(props) {
  const [username, setUsername] = useState();
  const [password, setPassword] = useState();

  const getData = async () => {
    try {
      const value1 = await AsyncStorage.getItem("login");
      const value2 = await AsyncStorage.getItem("password");

      setUsername(value1);
      setPassword(value2);
      console.log("retrieved value from async storage  ", value1, value2); 
    } catch (e) {
      console.log(e);
    }
  };

  useEffect(() => {
    getData();
  }, []); // empty dependency array means this effect will run once when the component mounts

  useEffect(() => {
    if (username && password) { // only run if both username and password are set
      console.log("stored value ", username, password);

      axios
        .post("https://........", {
          auth: {
            username: username,
            password: password,
          },
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }, [username, password]); // this effect will run when username or password state changes
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search