在 React Final Form 中使用 FormSpy 作为 Redux-Form isDirty 的替代方法的正确方法是什么？

问题描述

我有一个大型（3 年以上）React Redux 项目，它使用了很多 Redux-Form。由于现在已停止使用，我正在 react-final-form 中开发新功能。迁移到 final-form 非常容易，但我使用了 redux-form 的一些高级特性，这些特性在 final-form 中没有等价物。我需要一个在表单之外的组件来知道表单何时变脏、提交等。

Final-form 为此建议使用 FormSpy，这可行，但我遇到了 React 的警告：

Cannot update during an existing state transition (such as within render)

所以，真的，这既是一个最终形式的问题，也是一个 React。我在下面放置了一个示例应用程序来说明问题。总之，父组件 <Parent/> 呈现一堆子组件。其中之一是最终表单实例 <TheForm/>，其他子组件之一 <ShowFormState/> 呈现表单的状态（例如，表单是否脏）。重要的是 ShowFormState 是表单的兄弟，而不是在其中。在 Redux-Form 中，这很简单：ShowFormState 可以从 redux 中获取表单的状态，但 final-form 没有等价物，因此 Parent 使用 FormSpy 的 onChange() 并将状态存储在它自己的状态中并将其作为道具传递给它的孩子 ShowFormState。

React no likey，我得到了上述错误（在 React 工作了 3 年后，我以前从未见过！）。警告是完全可以理解的，这不是问题。我对如何使用给定的结构解决这个问题有点困惑。

示例应用程序如下，我希望它足够清楚:)。任何从 redux-form 迁移到 final-form 的人都遇到过类似的问题？

import React,{Component} from 'react'
import {Form,FormSpy,Field } from 'react-final-form' 

class Parent extends Component {

  constructor(props){
    super(props)
    this.state = {}
  }

  onSubmit = () => { console.log("Submitted!") }

  onChange = ({dirty}) => {
    // triggers rerender DURING render so cant do this
    this.setState({ dirty })
  }

  render = () => (
    <>
      <TheForm
        onChange={this.onChange}
        onSubmit={this.onSubmit}
        />
      {/*other components ...*/}
      <ShowFormState dirty={this.state.dirty}/>
    </>
  )
}

const ShowFormState = ({dirty}) => dirty ? <p>dirty!</p> : null

const TheForm = ({onChange,onSubmit}) => (
  <Form
    onSubmit={onSubmit}
    initialValues={{ name:'' }}>
    {({ handleSubmit }) => (
      <form className="wrap" onSubmit={handleSubmit}>
        <label>
          Name:
          <Field name="name" component="input"/>
        </label>
        {<FormSpy onChange={onChange}/>}
      </form>
    )}
  </Form>
)

function App() {
  return <Parent /> 
}

export default App;

在此先感谢您的帮助:)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）