Question

我是本机反应的新手。我的文件夹结构如下：

-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;

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

有人建议如何在本机操作吗？

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: 'test@email.com',
city: 'Singapore'
 }

// set LocalStorage

USER_DATA.set(user);

// get LocalStorage

USER_DATA.get().user

也就是说，您可以将Constant设为通用文件，并在任何地方重复使用，以避免编写冗余代码。

通用功能来存储本地存储数据

2 个答案: