AsyncStorage React Native save an Array

Question

I tried saving an array, I tried to follow the documentation but failed miserably. How should I write it so that it doesn't give me various warnings and errors.

Errors :

got an [Object Object] when I try to set the item
Got an object instead of an array
Attempted to assign to read only property
expected a string, got an array

Here is the code : App.js

 import React from "react";
 import {
  StyleSheet,
  Text,
  View,
  TextInput,
  ScrollView,
  TouchableOpacity,
  KeyboardAvoidingView,
  AsyncStorage
} from "react-native";
import Note from "./app/components/note";

export default class App extends React.Component {
 state = {
    noteArray: [],
    noteText: ""
};

render() {
    let notes = this.state.noteArray.map((val, key) => {
        return (
            <Note
                key={key}
                keyval={key}
                val={val}
                deleteMethod={() => this.deleteNote(key)}
            />
        );
    });

    return (
        <KeyboardAvoidingView behavior="padding" style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.headerText}>Tasker</Text>
            </View>

            <ScrollView style={styles.scrollContainer}>{notes}</ScrollView>

            <View style={styles.footer}>
                <TouchableOpacity
                    onPress={this.addNote.bind(this)}
                    style={styles.addButton}
                >
                    <Text style={styles.addButtonText}>+</Text>
                </TouchableOpacity>

                <TextInput
                    style={styles.textInput}
                    placeholder="Enter Task..."
                    placeholderTextColor="white"
                    underlinedColorAndroid="transparent"
                    onChangeText={noteText => this.setState({ noteText })}
                    value={this.state.noteText}
                />
            </View>
        </KeyboardAvoidingView>
    );
}

addNote() {
    if (this.state.noteText) {
        var d = new Date();
        this.state.noteArray.push({
            date:
                d.getFullYear() +
                "/" +
                (d.getMonth() + 1) +
                "/" +
                d.getDate(),
            note: this.state.noteText
        });
        this.setState({ noteArray: this.state.noteArray });
        this.setState({ noteText: "" });
    }

    //AsyncStorage.setItem() How do I write it so no errors occur
    alert({ noteArray: this.state.noteArray });
}
}

Extra Note : The Error is on Expo App on my phone both Android and iOS

Thanks in Advance!

addNote() is wrong. You should consider this state to be immutable. Make a copy of it and modify the copy, then setState with the copy only once. — Bruno Grieder
– Bruno Grieder, Commented Sep 18, 2017 at 8:35
how do I do that? please can you provide me some guide or code? im still a noob at this — Abhishta Gatya
– Abhishta Gatya, Commented Sep 18, 2017 at 8:38

user8716958 · Accepted Answer · 2017-10-03 22:54:17Z

1

Arrays and other objects need to be saved as strings in AsyncStorage.

AsyncStorage.setItem('arrayObjKey', JSON.stringify(myArray));

Also if you need to update the values in the array use AsyncStorage.multiMerge

From the React-Native docs:

Merges an existing key value with an input value, assuming both values are stringified JSON. Returns a Promise object.

answered Oct 3, 2017 at 22:54

user8716958

111 bronze badge

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

1 Comment

ContinuousLoad Over a year ago

The only improvement I could suggest is to include some of the OP's (Original Poster's) code to show how it fits into their example, since he/she mentioned they are a beginner.

Collectives™ on Stack Overflow

AsyncStorage React Native save an Array

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related