如何在 <Form/> 之外使用 useFormState

Question

我将 react-admin v2.0 升级到 3.0，我遵循了这个 guide。

我在 react-final-form 和 jest 测试中遇到问题。

我在按钮上做了一个自定义逻辑，我需要表单值，所以我使用 react-final-form 中的 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>
  );
};

这里是错误

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)

我不明白如何在 react-admin

中正确使用 <Form/> 和 useFormState

Answer 1

您需要在测试中将 <Form> 放在 <Toolbar/> 周围。 useFormState() 在 React 上下文中查找包含表单。显然在您的应用程序中，您的 <Toolbar/> 总是在 <Form/> 中，因此您需要复制它以进行测试。

如何在 <Form/> 之外使用 useFormState

How to use useFormState outside a <Form/>

reactjs

jestjs

redux-form

react-admin

react-final-form