首页 > 解决方案 > 如何将模拟器上显示的 json 数据保存到本地存储(React-native)

问题描述

我正在使用 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>
  );

}}

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

标签: iosjsonreactjsxcodereact-native

解决方案


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


推荐阅读