Реакция сборника рассказов - создание составного компонента с контекстом - PullRequest
Новая
       6

Реакция сборника рассказов - создание составного компонента с контекстом

1 голос
/ 19 февраля 2020

Я пытаюсь получить доступ к методам в контексте реакции, чтобы создать различные варианты составного компонента сборника рассказов, и получаю сообщение об ошибке:

React Hook "useEffect" is called in function "withItem" which is neither a React function component or a custom React Hook function. Это мои настройки:

У меня есть компонент функции реагирования, который использует контекст:

AppContext: 

import React from 'react';
export default React.createContext();

MyComponent 

import AppContext from '../../contexts/AppContext';

function MyComponent() {
  const { myItems } = useContext(
    AppContext
  );

и мой App.js файл использует пользовательский хук: 

import useAppContext, { providerPropTypes } from './hooks/useAppContext';

, где useAppContext содержит различные утилиты и функции: 

...
export default function useAppContext() {
  const onAddItem = product => {...}
  return {
    addItem: onAddItem,
    ...
  }

}

Итак, при попытке заполнить конфигурацию сборника рассказов компонент, где компонент добавил элемент, я пытаюсь сделать это: 

import React, { useContext, useEffect } from 'react';
import { addDecorator } from '@storybook/react';

import useAppContext, { providerPropTypes } from '../../hooks/useAppContext';
import AppContext from '../../contexts/AppContext';

import MyComponent from './index';

import myItems from '../../mocks/myItems';

export default {
  title: 'Cart',
  decorators: [(storyFn) => {
    const appContextValue = useAppContext();

    return (
      <AppContext.Provider value={appContextValue}>
        {storyFn(appContextValue)}
      </AppContext.Provider>
    )
  }],
};

export const empty = () => {
  return (
    <MyComponent/>
  )
};

export const withItem = (appContextValue) => {
  useEffect(() => {
    appContextValue.addItem(myItems[0]);
  }, []);

  return (
    <Cart/>
  )
};

, когда я получаю вышеупомянутую ошибку eslint.

Как мне избежать этой ошибки (я Заметьте, что он отображается правильно за сообщением об ошибке, несмотря на ошибку eslint)? Как правильно использовать контекст в составных компонентах сборника рассказов?

...