React Native 制作一个通用函数来存储本地存储数据

cedebl8k 于 2022-12-14 发布在 React

关注(0)|答案(3)|浏览(127)

我是一个新手在react-native。我有一个文件夹结构如下：

-screens
  -page1.js
  -page2.js
  -page3.js
  -page4.js
-App.js

在page1.js中，我有一个将数据存储到localStorage的函数

let obj = {
    name: 'John Doe',
    email: 'test@email.com',
    city: 'Singapore'
}
AsyncStorage.setItem('user', JSON.stringify(obj));

现在我必须在其他几个页面中显示这些数据。这是我的代码。

class Page2 extends Component {
    state = {
        username: false
    };

    async componentDidMount() {
        const usernameGet = await AsyncStorage.getItem('user');
        let parsed = JSON.parse(usernameGet);
        if (parsed) {
            this.setState({
                username: parsed.name,
                email: parsed.email
            });
        } else {
            this.setState({
                username: false,
                email: false
            });
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.saved}>
                    {this.state.username}
                </Text>
            </View>
        );
    }
}

export default Page2;

这是我在第二页显示数据的方式。我可能需要在其他页也显示这些。我不想在每一页都重复这些代码。
有什么建议如何在react-native中做到这一点？

react-native

来源：https://stackoverflow.com/questions/52253779/make-a-common-function-to-store-the-local-storage-data

3条答案

按热度按时间

332nm8kg1#

您可以将需要显示的数据提取到它自己的组件中，并在需要显示它的任何页面中重用它。
另一种选择是使用higher-order component，这样你就可以将它 Package 在任何需要数据的组件上，并将它作为一个 prop 传递下去。

赞(0）回复(0）举报 2022-12-14

xxls0lw82#

你可以把你的Constant.js放在你所有常用的实用程序和常量中，在你的应用程序中的任何地方都可以重用。
在Constant.js中：

export const USER_DATA = {

 set: ({ user}) => {
      localStorage.setItem('user', JSON.stringify(obj));
   },
   remove: () => {
      localStorage.removeItem('user');
      localStorage.removeItem('refresh_token');
 },
   get: () => ({
     user: localStorage.getItem('user'),
  }),

 }

在任何组件中，都可以导入它并使用，如下所示：

import { USER_DATA } from './Constants';

let user = {
name: 'John Doe',
email: 'test@email.com',
city: 'Singapore'
 }

// set LocalStorage

USER_DATA.set(user);

// get LocalStorage

USER_DATA.get().user

也就是说，你可以创建Constant公共文件，并在任何地方重用它们，以避免编写冗余代码。

赞(0）回复(0）举报 2022-12-14

ny6fqffe3#

简化的可重用的本地存储方法

export const localData = {
    add(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
    },
    remove(key, value) {
        localStorage.removeItem(key);
    },
    load(key) {
        const stored = localStorage.getItem(key);
        return stored == null ? undefined : JSON.parse(stored);
    },
};

localData.add("user_name", "serialCoder")

console.log( "After set 👉", localData.load("user_name") )

localData.remove("user_name")

console.log( "After remove 👉", localData.load("user_name") )

赞(0）回复(0）举报 2022-12-14

我来回答

React Native 制作一个通用函数来存储本地存储数据

3条答案

相关问题

热门标签

最新问答