Question

据我了解，我在其中一个教程中发现了这段代码，当在输入中输入文本时，文本将保存在异步存储中，但是当按下按钮时，如何使该对象成为对象像这样的{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'
   }
})

Answer 1

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

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,
    borderWidth: 1,
    backgroundColor: "#7685ed",
  },
});

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

1 个答案: