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

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

0 голосов
/ 10 сентября 2018

Я новичок в реакции-родной. У меня есть структура папок, как показано ниже: 

-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. Возможно, мне придется показать их на другой странице тоже. Я не хочу повторять эти коды на каждой странице.

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

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Вы можете сделать свой 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 голосов
/ 10 сентября 2018

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

Другой вариант - использовать компонент более высокого порядка , чтобы вы могли обернуть его вокруг любых компонентов, которым требуются данные, и он будет передан в качестве подпорки.

...