Сделайте общую функцию для хранения данных локального хранилища

Я новичок в 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;

Вот как я отображаю данные на странице 2. Возможно, мне придется показать это и на другой странице. Я не хочу повторять эти коды на каждой странице.

Любые предложения, как это сделать в react-native?

1
0
435
2

Ответы 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 и повторно использовать его где угодно, чтобы избежать написания избыточного кода.

Другие вопросы по теме