javascript - Mobx/Storybook：需要配置 Storybook 以使用 Mobx-State-Tree

Question

当我Cannot read property 'data' of undefined尝试在 StoryBook 中查看组件时，超过 80% 的组件出现错误。

我想我需要模拟故事中的数据或将相应的商店传递给它，但我不确定。我联系了Storybook Discord频道，有人建议将它们包装在 a 中<Provider>，但我不知道如何在 Storybook 中实现这一点。

我已经为我的组件和下面的相应故事文件创建了一个基本大纲。对此的任何帮助或建议将不胜感激！

Component

import React, { Fragment, useEffect } from 'react'
import { observer } from 'mobx-react-lite'
import { RootStoreModel } from '../../stores/root-store'
import useInject from '../../hooks/useInject'

const mapStore = ({ componentSummary, customer }: RootStoreModel) => ({
    item1: parent.data.item1,
    item2: parent.data.item2
    item3:  parent.data.item3
})

type Props = {
    idx: number;
    title: string;
    toggleActive: (idx: number, newState: false) => void;
}

const MyComponent = (props: Props): JSX.Element => {
    const {
    item1,
    item2,
    item3
    } = useInject(mapStore)

    const { idx, title, toggleActive } = props

    return (
        <div>Content</div>
        )
}

export default observer(MyComponent)

Story file for component

import React from 'react';
import { storiesOf } from '@storybook/react';
import MyComponent from './myComponent';

const options = ['done', 'error', 'pending'];

storiesOf('My Component', module)
    .add(
        'Default', () =>
            <MyComponent idx={0} title="ComponentNumeroUno" toggleActive={() => null}/>,
    );

标签： javascriptreactjstypescriptmobxstorybook