JSON parse error: Unexpected identifier “object”

Question

I am saving my firestore data which is array in AsyncStorage. And again i am getting it. Here is my code:

AsyncStorage.setItem('Users', JSON.stringify(doc.data().Items));

So in firestore my Items is an array

While getting that array i am getting the mentioned error.

async componentWillMount() {
    const myArray = await AsyncStorage.getItem('Users');
    alert(JSON.parse(myArray))
    if (myArray != null || myArray != undefined || myArray != '') {
            this.setState({ UserArray: JSON.parse(myArray) })
    }
}

Update:

 renderPost = post => {
        return (
         <TouchableWithoutFeedback onPress={ () => this.passDateToNextScreen(post)}>
                      <Spinner
      visible={this.state.showLoader}
      text="Uploading ..."
      textStyle={styles.spinnerTextStyle}
    />
            <View style={styles.feedItem}>
                <Feather  name="book" style={styles.avatar}  size={30}/>
                <View style={{ flex: 1 }}>
                    <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
                        <View>
                            <Text style={styles.name}>{post.RecipeName}</Text>
                              <Text style={styles.timestamp}>{post.RecipeFullTimeTakenToCook}  |  {post.RecipeCategory}</Text>
                        </View>
                    </View>
                </View>
                <Feather name="chevron-right" style={{color: "#808080", alignSelf: 'center'}} size={20}/>
            </View>
        </TouchableWithoutFeedback>
        );
    };

render() {

    return (
        <View style={styles.container}>
            {
                this.state.UserArray.length ?
                (<FlatList
                    style={styles.feed}
                    data={this.state.UserArray}
                    renderItem={({ item }) => this.renderPost(item)}
                    showsVerticalScrollIndicator={false}
                ></FlatList>) :
                (
         <View style={{  width: '70%', alignSelf: 'center',justifyContent: 'center' , alignItems: 'center', marginTop: '20%'}}>
            <Feather name="smile" color="#009387" size={40}/>
            <Text style={{paddingTop: 20, textAlign: 'center', fontSize: 15, fontWeight: 'bold', color: '#A9A9A9'}}>Hey folk, You dont' have any recipe list. Please tap on edit button to write your recipe book list</Text>
        </View>
                )
            }

        </View>
    );
}

My render is straight forward. But if i set the state for my UserArray. Then i am getting this error

Answer 1

AsyncStorage.getItem('Users') is a asynchronous function, so you must have await | async await | async in your function.

You can try:

async componentWillMount() {
    const myArray = await AsyncStorage.getItem('Users');
    alert(JSON.parse(myArray))
    if (myArray != null || myArray != undefined || myArray != '') {
            this.setState({ UserArray: JSON.parse(myArray) })
    }
}