Реагировать на родной контекст - PullRequest
Новая
       25

Реагировать на родной контекст

0 голосов
/ 28 апреля 2020

Я пытаюсь создать контекст для сохранения данных из ответа API. Но это дает мне ошибку. Я не знаю, как решить эту ошибку. Этот экран - экран показа. На экране указателя я могу использовать другой контекст, и он работает хорошо. Я хочу создать другой контекст для сохранения данных из другого вызова API. Я пытаюсь скопировать его, но он выдает ошибку. Спасибо.

Ошибка типа: undefined не является объектом (оценивается как _useContext.state)

КОНТЕКСТ 

 import createDataContext from './createDataContext';
import jsonServer from '../api/api';

const currencyPrices = (state, action) => {
  switch (action.type) {
    case 'show_prices':
      return action.payload;
    default:
      return state;
  }
};

const showPrices = (dispatch) => {
  return async (id) => {
    const response = await jsonServer.get(`/prices/${id}`);

    dispatch({type: 'show_prices', payload: response.data[0]});
  };
};

export const {Context, Provider} = createDataContext(
  currencyPrices,
  {showPrices},
  [],
);

СОЗДАТЬ КОНТЕКСТ ДАННЫХ 

import React, {useReducer} from 'react';

export default (reducer, actions, initialState) => {
  const Context = React.createContext();

  const Provider = ({children}) => {
    const [state, dispatch] = useReducer(reducer, initialState);

    // actions === { addBlogPost: (dispatch) => { return () => {} } }
    const boundActions = {};
    for (let key in actions) {
      boundActions[key] = actions[key](dispatch);
    }

    return (
      <Context.Provider value={{state, ...boundActions}}>
        {children}
      </Context.Provider>
    );
  };

  return {Context, Provider};
};

ЭКРАН 

/* eslint-disable react-hooks/rules-of-hooks */
import React, {useContext, useEffect} from 'react';
import {View, Text} from 'react-native';
import {Context} from '../context/currencyPrices';
const showScreen = ({navigation}) => {
  const {state, showPrices} = useContext(Context);
  useEffect(() => {
    showPrices(1);

    const listener = navigation.addListener('didFocus', () => {
      showPrices(1);
    });

    return () => {
      listener.remove();
    };
  });

  return (
    <View>
      <Text>{state.length}</Text>
    </View>
  );
};

export default showScreen;

1 Ответ

0 голосов
/ 28 апреля 2020

в приложении. js 

import {Provider  as ProviderName}

<ProciderName>
<App/>
</ProviderName}

Вы должны завернуть провайдера в мани root как приложение. js

...