试图用react-admin使用故事书时出现错误，"useField必须在一个<Form>组件中使用"。

Question

在使用Storybook和react-admin时遇到了困难。我已经成功地将它与 react 和 material-ui 组件一起使用，但是当我添加 TextInput 时，我得到了这样一个错误："useField 必须在一个组件内部使用。于是我把TextInput包装在一个SimpleForm组件里面，我得到了第二个错误。"无法读取未定义的'历史'属性"。

这已经远远超出了我目前的知识范围，我感到很沮丧。我确信这是一个简单的修复方法，我应该可以用react-admin来使用Storybook。谁能告诉我其中的秘密？这是我目前的简单故事。

import React from 'react';
import { SimpleForm, TextInput, required } from 'react-admin';
import { Button, Typography, Card, CardContent } from '@material-ui/core';

export default {
  title: 'Sources',
};

export const TestSource = () => {
  return (
    <SimpleForm>
      <TextInput
        source="test" label="Source Name" validate={required()} fullWidth margin="none"
        validate={required()}
      />
    </SimpleForm>
  )
}

任何帮助都将被感激。

更新:感谢下面的@gstvg，添加Admin标签确实有了一些结果。不知道我是否明白如何让这个更有用（在浏览器中仅仅使用应用程序比在storybook中模拟一个可以使用的表单几乎一样多的工作，但也许我只是还没有得到它。

下面是新的代码（必须为Admin添加一个dataProvider道具），以及我所看到的（至少我看到了一些东西，但表单是重复的，不确定它是否正确显示）。

  return (
    <Admin dataProvider={dataprovider}>
      <SimpleForm>
        <TextInput
          source="test" label="Source Name" validate={required()} fullWidth margin="none"
          validate={required()}
        />
        <TextInput
          source="test" label="Next Field" validate={required()} fullWidth margin="none"
          validate={required()}
        />
      </SimpleForm>
    </Admin>

Answer 1

大部分的react-admin组件都希望道具能被其他react-admin父组件传递。

TextInput所期望的道具。

https：/github.commarmelabreact-adminblobb40229f6974a6ec586d9fc4b6116696df7b2b1d0packagesra-ui-materialuisrcinputTextInput.tsx#L88。

而由SimpleForm。

https:/github.commarmelabreact-adminblobb40229f6974a6ec586d9fc4b6116696df7b2b1d0packagesra-ui-materialuisrcformSimpleForm.js#L51。

在这种情况下，TextInput期待一个SimpleForm父体（或TabbedForm、Filter等），就像你一样，而SimpleForm通常期待一个Edit或Create父体。

考虑到你所面临的错误，它们似乎与上面定义的预期缺失的道具无关，所以它们可能是由于在某个react-admin复杂的钩子范围之外或类似的东西而发生的，所以也许只是传递道具是行不通的。

你可以尝试自己传递道具，或者像这里一样，将整个故事书嵌入到Admin中。

https:/marmelab.comlog20190117react-timeline.html

更新你的发现。

我发现最小的设置是这样的:

import { Admin, Resource, Layout, SimpleForm, TextInput, required } from 'react-admin'

const NoLayout = props => (
    <Layout
        appBar={"span"}
        sideBar={"span"}
        menu={"span"}
        {...props}
    />
)

const Dashboard = props => (
    <SimpleForm>
        <TextInput
            source="test" label="Source Name" validate={required()} fullWidth margin="none"
            validate={required()}
        />
        <TextInput
            source="test2" label="Next Field" validate={required()} fullWidth margin="none"
            validate={required()}
        />
    </SimpleForm>
)

const App = () => {

    return (
        <Admin dataProvider={{}} menu={"span"} dashboard={Dashboard} layout={NoLayout}>
            <Resource name="test"/>
        </Admin>
    )
}

你甚至不需要一个真正的dataProvider. 资源是给反应管理的，而不是抱怨一个空的管理。另外，我区分了输入源，两个都是等价的，编辑一个输入会改变两个输入的值，我想这不是你想要的。