反应本机异步存储如何保存和添加对象

问题描述

据我了解，我在其中一个教程中发现了这段代码，当在输入中输入文本时，文本将保存在异步存储中，但是当按下按钮时，如何使该对象成为对象像这样的{id: 1,name: 'Alex'} 形成并添加到状态中了。

import React,{ Component } from 'react'
import { StatusBar } from 'react-native'
import { AsyncStorage,Text,View,TextInput,StyleSheet } from 'react-native'

class AsyncStorageExample extends Component {
   state = {
      'name': ''
   }
   componentDidMount = () => AsyncStorage.getItem('name').then((value) => this.setState({ 'name': value }))
   
   setName = (value) => {
      AsyncStorage.setItem('name',value);
      this.setState({ 'name': value });
   }
   render() {
      return (
         <View style = {styles.container}>
            <TextInput style = {styles.textInput} autoCapitalize = 'none'
            onChangeText = {this.setName}/>
            <Text>
               {this.state.name}
            </Text>
         </View>
      )
   }
}
export default AsyncStorageExample

const styles = StyleSheet.create ({
   container: {
      flex: 1,alignItems: 'center',marginTop: 50
   },textInput: {
      margin: 5,height: 100,borderWidth: 1,backgroundColor: '#7685ed'
   }
})

解决方法

您可以检查以下代码，这将有助于解决您的问题。

import React,{ Component } from "react";
import { StatusBar } from "react-native";
import {
  AsyncStorage,TouchableOpacity,Text,View,TextInput,StyleSheet,} from "react-native";

class AsyncStorageExample extends Component {
  state = {
    name: "",savedData: "",};
  componentDidMount = () =>
    AsyncStorage.getItem("name").then((value) =>
      this.setState({ savedData: value })
    );

  setData = (value) => {
    AsyncStorage.setItem("name",JSON.stringify([{ id: 1,name: value }]));
  };
  getData = (value) => {
    AsyncStorage.getItem("name").then((value) =>
      this.setState({ savedData: value })
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.textInput}
          autoCapitalize="none"
          value={this.state.value}
          onChangeText={(value) => {
            this.setData(value);
          }}
        />
        <Text>{this.state.savedData}</Text>
        <TouchableOpacity
          activeOpacity={0.5}
          onPress={() => {
            this.setData(this.state.name);
          }}
        >
          <View style={styles.saveButton}>
            <Text style={styles.textStyle}>{"Save Data"}</Text>
          </View>
        </TouchableOpacity>

        <TouchableOpacity
          activeOpacity={0.5}
          onPress={() => {
            this.getData(this.state.name);
          }}
        >
          <View style={styles.saveButton}>
            <Text style={styles.textStyle}>{"Get Data"}</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}
export default AsyncStorageExample;

const styles = StyleSheet.create({
  container: {
    flex: 1,alignItems: "center",marginTop: 50,},textStyle: {
    color: "white",textAlign: "center",saveButton: {
    width: 100,height: 40,marginBottom:10,marginTop:15,borderRadius: 8,borderColor: "white",justifyContent: "center",borderWidth: 1,color: "white",backgroundColor: "#7685ed",textInput: {
    width: "80%",height: 100,borderRadius: 5,});