时间戳

首页 > 解决方案 > 做一个通用的函数来存储本地存储数据

reactjs - 做一个通用的函数来存储本地存储数据

问题描述

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

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

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

标签： reactjsreact-nativereact-redux

解决方案

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

另一种选择是使用高阶组件，这样您就可以将它包装在任何需要数据的组件周围，并将其作为道具传递下去。

推荐阅读