如何将模拟器上显示的 json 数据保存到本地存储（React-native）

Question

我正在使用 react-native 和 expo。我有两个屏幕。当用户点击第一个屏幕symbol 比如

第一屏：

A
acompany
B
bcompany

用户点击A 符号。我为该符号获取一些 json 数据并显示在我的第二个屏幕上，但我希望将获取的数据保存在第二个屏幕上。但是现在如果我回到第一个屏幕（它有一些 json 数据，例如符号名称 A 以及它代表的公司等，如上所述）并回到第二个屏幕，数据就会消失。有什么方法可以将我的second screen 的数据存储到本地存储中？我已经评论了我想存储在本地存储中的第二类中的行

我的第二堂课：

import React, { useState, useEffect } from "react";
import {
  TouchableWithoutFeedback,
  Keyboard,
  FlatList,
  TextInput,
  Button,
  Text,
} from "react-native";
import {
  StyleSheet,
  View 
} from "react-native";
import { useStocksContext } from "../contexts/StocksContext";
import { scaleSize } from "../constants/Layout";


export default function StocksScreen({ route }) {
  const { ServerURL, watchList } = useStocksContext();
  const [state, setState] = useState({
    myListData: [],

  });

  const { stuff } = route.params;


  renderWithData = () => {
    return fetch(`http://131.181.190.87:3001/history?symbol=${stuff}`)
      .then((res) => res.json())
      .then((json) => {
        setState({
          isLoaded: true,
          myListData: json,
        });


      });
  };




  useEffect(() => {
    renderWithData();

  }, [watchList]);


  let item = state.myListData.length && state.myListData[0];


 //that's the data I would like to save on local storage (movie)
 let movie = (
  <View  style={styles.text}>
   <Text style={styles.text} key={item.symbol}>
      {item.high}
    </Text>

    <Text style={styles.text} key={item.symbol}>
      {item.close}
    </Text>


  </View>
)


  return (
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
    <View style={styles.container}>
      <Text style={styles.text}>bb</Text>
      <View>{movie}</View>

      </View>
        </TouchableWithoutFeedback>

   );
}



const styles = StyleSheet.create({
  text: {
    color: "black",
    backgroundColor: "white",
  },
});

第三类：这里我想把我的数据保存到本地存储

import React, { useState, useContext, useEffect } from "react";
import { AsyncStorage } from "react-native";

const StocksContext = React.createContext();

export const StocksProvider = ({})


  const [state, setState] = useState([]);

  return (
    <StocksContext.Provider value={[state, setState]}>

    </StocksContext.Provider>
  );

}}

如何将我的第二个屏幕数据存储到本地存储？有没有办法做到这一点？我以前从未这样做过，例如在本地存储数据。我什至浏览了几个教程并在网上查看，但无法弄清楚。任何帮助表示赞赏。

Answer 1

要在本地存储数据，您必须在 AsyncStorage 之上使用抽象，而不是直接使用 AsyncStorage，因为它可以在全球范围内运行，而不是轻量级使用。

    import React, { useState, useContext, useEffect } from "react";
    import { AsyncStorage } from "react-native";

    const StocksContext = React.createContext();

    export const StocksProvider = ({})


      const [state, setState] = useState([]);

      storeData = async () => {
      try {
        await AsyncStorage.setItem(
          'Your Key',
           state
        );
      } catch (error) {
        // Error saving data
      }
    };

   retrieveData = async () => {
      try {
        const value = await AsyncStorage.getItem('Your Key');
        if (value !== null) {
          // We have data!!
          console.log(value);
        }
      } catch (error) {
        // Error retrieving data
      }
    };     

      return (
        <StocksContext.Provider value={[state, setState]}>

        </StocksContext.Provider>
      );

    }}

详情请点击此链接： https://reactnative.dev/docs/asyncstorage

Answer 2

要在本地存储数据，您可以使用 React Native AsyncStorage 获取保存的数据：getItem()。你也可以使用 Redux 的 store 功能。创建 Redux 存储时，向 createStore 函数传递一个包含应用的根 reducer 的 persistReducer。创建 store 后，将其传递给persistStore 函数，以确保您的 redux 状态在发生更改时保存到持久化存储中。store,