创建一个常用功能来存储本地存储数据

Question

我是反应原生的新手。我有一个像下面的文件夹结构：

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

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

let obj = {
    name: 'John Doe',
    email: '[email protected]',
    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;

这是我在第2页中显示数据的方式。我可能还需要在其他页面中显示这些内容。我不想在每个页面重复这些代码。

有什么建议如何在react-native中做到这一点？

Answer 1

您可以将需要显示的数据提取到其自己的组件中，然后在需要显示它的任何页面中重复使用它。

另一种选择是使用higher-order component，这样你可以将它包裹在需要数据的任何组件周围，它将作为道具传递下来。

Answer 2

您可以将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: '[email protected]',
city: 'Singapore'
 }

// set LocalStorage

USER_DATA.set(user);

// get LocalStorage

USER_DATA.get().user

那就是你可以制作Constant公共文件并在任何地方重复使用它们以避免编写冗余代码。