setState not working inside AsyncStorage in react native?

asyncstorage react native
react-native asyncstorage not working

setState not working inside AsyncStorage in React Native.

constructor(props) {
    super(props);
    this.state = {userId: ''};
}

componentDidMount() {

    AsyncStorage.getItem('USER_ID', (err, result) => {
        if (!err && result != null) {
            this.setState({
                userId: result
            });
        }
        else {
            this.setState({
                userId: null
            });
        }
    });

    alert(this.state.userId);
    let userId = this.state.userId;

    fetch('http://localhost/JsonApi/myprofile.php', {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            userId: userId,
        }),
    })
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({userDetails: responseJson});
        })
        .catch((error) => {
            console.error(error);
        });

}

Setting the userId value using setState and alert returns no value at all. Tried other solutions from Stackoverflow but not as per my expectation.

Note: Code updated. After getting userId from AsyncStorage, it will be passed to fetch. Here, userId value is missing.

2 ways to do this. One is Simple but other is correct way according to react recommendation

One is here- pass value to state directly.

 .then((responseJson) => {
           // this.setState({userDetails: responseJson});
      this.state.userDetails=responseJson;
     this.setState({});   //for update render
        })

Second Way is here

in the render function Check state Value like this .if UserDetails state is null it will be not give you error whenever userDetails state get data render execute again and provide perfect result.

          render() {
    return (
      <div>
        {this.state.userDetails ?
          this.state.userDetails.map((data, index) =>
            <tr key={index}>
              <td>{data.userName}</td>
              <td>{data.userEmail}</td>
            </tr>
          )
          : null
        }
 </div>)}

Let me know gain. if facing issue

AsyncStorage not working properly · Issue #219 · react-native , Current behavior AsyncStorage not working properly on 0.60.5 I set and get the It was working fine on Android 8.1 with React Native 0.59. storeData = async () => { console.log("inside storeData") try { await AsyncStorage. setState({ storedData: value }) } catch (e) { // error reading value } } render()  Commenting out all the AsyncStorage stuff and logging the state and props gives expected result. I think the main problem here is being caused by AsyncStorage.getItem. Without this method, all the functions and stuff work as expected. I tried putting it inside componentWillUpdate and componentWillMount as well and got the same result.

Try to alert after updating state. You will get callback once state is updated.

this.setState({
                userId: result
            },function(){
        console.log("userId in async = ", this.state.userId);
        alert(this.state.userId);
});

Keep getting setState warning on ComponentDidMount with , I just want to show a spinner if the asyncstorage call is still running. 'native-​base'; import { AsyncStorage, Keyboard, Image } from 'react-native'; import { Actions } from 'react-native-router-flux'; import { loginUser } from '. The problem is: with the pull to refresh and scaling of the header all housed within a scroll view. Current behavior. AsyncStorage not working properly on 0.60.5 I set and get the async storage with the help of two button. Value successfully sets and gets but when i reload the application and tried to get the value again without setting it return null.

How Do I Retrieve asyncStorage Data only if it is actually there , I tried to JSON.parse the value from asyncStorage to test if it is null but that gives me a setState({ display: 'no it does not work', }) } }. Continue this thread. View entire discussion ( 4 comments). More posts from the reactnative community. 233 with the pull to refresh and scaling of the header all housed within a scroll view. import { AsyncStorage } from 'react-native'; and the AsyncStorage.getItem or AsyncStorage.setItem was not working, whatever code was there after AsunStorage was not running, so. I Modified my import like to this import { Text, StyleSheet, TouchableHighlight, TextInput, AsyncStorage } from 'react-native'; and now everything was working fine.

React Native - AsyncStorage, React Native - AsyncStorage - In this chapter, we will show you how to persist your data using setState({ 'name': value }); } render() { return ( <View style  Simplified issue. Calling this.setState inside a Promise, renders before ends pending Promise. My problems are: The this.setState is not immediatly returned I expected it to be async, so that the pending promise will be closed first. If something will break inside the render function, the catch inside the Promise is called.

react-native How to get data using AsyncStorage in this.state , react-native How to get data using AsyncStorage in this.state {} - react-native. So the problem I'm having is that the setState method doesn't seem to want to update If you want to use this inside the firebase callback function you must either  On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, AsyncStorage will use either RocksDB or SQLite based on what is available.

Understanding React setState() (Callback, Async-Await and , In this tutorial we'll look at how to use React setState() More often than not, your React components will have state. Just like “properties”, the state is a plain JS object which holds information that affects the output Inside a React component​, you have two categories of data - props and state - props are  Summary: This patch is a bit of a hack job, but I'd argue it's necessary to dramatically improve the dev UX on Android devices. Somewhere in react-native, there's a shared SerialExecutor which AsyncStorage uses that is getting blocked, causing remote debugging to occasionally hang indefinitely for folks making AsyncStorage requests.

Comments
  • Are you sure, the callback is triggered. Also, setState changes may not be immediately reflected. I see that you are trying to alert the value later. It may not help.
  • sometime AsyncStorage take time to execute and it may be possible that your state is called before AsyncStorage execute. So for debugging console.warn("check state,"this.state.userId) inside the render method. (because render call everytime when state is change . )try this and let me know
  • @anilsidhu Let me check that. I am thinking the same. But, not found a way to rectify it.
  • @anilsidhu Yes. Its working. But the thing is that, I want to sent this userId via a fetch. At the time of fetching it's not getting this values. And POST sent with null value. How can I solve that ..?
  • i am making answer for this for better code format
  • Hi, your solution will work. but, I updated the code, have you seen that. I want to pass that value to fetch. There it will not work.
  • async componentDidMount() { await AsyncStorage.getItem('USER_ID', (err, result) => .................... } try this one . now your code will wait for AsyncStorage and then execute next code
  • Yes. it works. Thanks. The solution was this simple.
  • Alerting after updating will work. I want to get the value after AsyncStorage. State is called before AsyncStorage execute. That is the issue I want to overcome.
  • Show your full code. Because it clearly shows setState userId: result will call after AsyncStorage callback. and AsyncStorage will be called into Async thread. So looks like from some other code your state is updating.
  • It is not necessary to use the promise based API. The official API supports callbacks as well. facebook.github.io/react-native/docs/asyncstorage.html#getitem.
  • @Khemraj Tied the first way before. it's not working. State is called before AsyncStorage execute.
  • What mean not working? You can provide what are you getting, is there any error in your logs?