Question

我正在尝试在react上下文中访问方法以创建复合故事书组件的不同变体并得到错误：

React Hook "useEffect" is called in function "withItem" which is neither a React function component or a custom React Hook function。这是我的设置：

我有一个使用上下文的react函数组件：

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错误，但我注意到该错误消息已正确显示在错误消息后面）？在复合故事书组件中利用上下文的正确方法是什么？

反应故事书-使用上下文创建复合组件

0 个答案: