Reactjs 如何在a之外使用useFormState<；表格/>；

我将

react admin

v2.0升级到3.0，我遵循了这一点

我对

react final form

和

jest

测试有问题

我在一个按钮上做了一个自定义逻辑，我需要表单值，所以我使用了

react final表单中的
useFormState
。它在应用程序上运行良好，但在运行
jest
测试时出错

这是我的组件中的代码

import { Button } from '@material-ui/core';
import { Save } from '@material-ui/icons';
import { useFormState } from 'react-final-form';
import React, { useCallback } from 'react';

const Toolbar = ({ onSubmit, translate }) => {
  const formState = useFormState();

  const handleCustomSubmit = useCallback(() => {
    const data = formState.values;
    onSubmit(data);
  }, [formState.values]);

  return (
    <Button id="SLM_saveButton" onClick={handleCustomSubmit}>
      <Save />
      {translate('ui_update')}
    </Button>
  );
};

从'@material ui/core'导入{Button}；
从“@material ui/icons”导入{Save}；
从“react final form”导入{useFormState}；
从“React”导入React，{useCallback}；
常量工具栏=（{onSubmit，translate}）=>{
const formState=useFormState（）；
const handleCustomSubmit=useCallback（（）=>{
常量数据=formState.values；
提交（数据）；
}，[formState.values]）；
返回(
{translate（'ui_update'）}
);
};

这里是错误

useFormState must be used inside of a <Form> component

       6 |
       7 | const Toolbar = ({ onSubmit, translate }) => {
    >  8 |   const formState = useFormState();
         |                     ^
       9 |
      10 |   const handleCustomSubmit = useCallback(() => {
      11 |     const data = formState.values;

      at useForm (node_modules/react-final-form/dist/react-final-form.cjs.js:297:11)
      at useFormState (node_modules/react-final-form/dist/react-final-form.cjs.js:309:14)
      at Component (packages/ui/src/components/Toolbar/component.js:8:21)
      at wrappedComponent.displayName.adapter.displayNameOfNode.type (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:569:33)
      at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:858:32)
      at fn (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:645:55)
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/src/Utils.js:99:18)
      at Object.render (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:645:20)
      at new ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:411:22)
      at Object.shallow (node_modules/enzyme/src/shallow.js:10:10)

useFormState必须在组件内部使用
6 |
7 |常量工具栏=（{onSubmit，translate}）=>{
>8 | const formState=useFormState（）；
|                     ^
9 |
10 | const handleCustomSubmit=useCallback（（）=>{
11 | const data=formState.values；
在useForm（node_modules/react final form/dist/react final form.cjs:297:11）
在useFormState（node_modules/react final form/dist/react final form.cjs:309:14）
at组件（packages/ui/src/components/Toolbar/Component.js:8:21）
在wrappedComponent.displayName.adapter.displayNameOfNode.type（node_modules/enzyme-adapter-react-16/src/reactiseteenadapter.js:569:33）
在reactshallwrender.render（node_modules/react test renderer/cjs/react test renderer shall.development.js:858:32）
在fn（node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:645:55）
在允许的状态下（node_modules/enzyme adapter utils/src/utils.js:99:18）
在Object.render（node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:645:20）
在新ShallowRapper（node_modules/enzyme/src/shallowRapper.js:411:22）
在Object.shallow（node_modules/enzyme/src/shallow.js:10:10）

我不知道如何在
react admin
中正确使用
和
useFormState
。
useFormState（）
在React上下文中查找包含表单。显然，在应用程序中，您的
始终位于
中，因此您需要为测试复制该表单