Question

我正在使用redux表单（只是尝试学习）。然后axios获取我的account数据并将其填充为表格。

我已经创建了一个沙箱：https://codesandbox.io/s/mzlrv1n988

从示例：https://redux-form.com/7.3.0/examples/initializefromstate/开始，一切似乎都是显而易见的。但这并没有涉及到实际的应用程序：我对代码进行了一些重构，并且为add和＆edit操作提供了顶级组件，这些组件处理服务器数据和来自表单的数据。而且我有一个表单组件：它的目标是表单UI &&验证。

如何在顶层组件中填充数据？

我的意思是EditForm组件中的这部分代码：

  getAccount = () =>
    axios.get("https://jsonplaceholder.typicode.com/posts/1").then(Account => {
      loadAccount(Account);
    });

还构成组件：

import React from "react";
import { connect } from "react-redux";
import { Field, reduxForm } from "redux-form";
import { load as loadAccount } from "./account";
const data = {
  // used to populate "account" reducer when "Load" is clicked
  body: "testtest",
  title: "yep!"
};

let AccountForm = props => {
  const { handleSubmit, load, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <button type="button" onClick={() => load(data)}>
          Load Account (example)
        </button>
      </div>
      <div>
        <label>body</label>
        <div>
          <Field name="body" component="input" type="text" placeholder="body" />
        </div>
      </div>
      <div>
        <label>title</label>
        <div>
          <Field
            name="title"
            component="input"
            type="text"
            placeholder="title"
          />
        </div>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Undo Changes
        </button>
      </div>
    </form>
  );
};

// Decorate with reduxForm(). It will read the initialValues prop provided by connect()
AccountForm = reduxForm({
  form: "initializeFromState" // a unique identifier for this form
})(AccountForm);

// You have to connect() to any reducers that you wish to connect to yourself
AccountForm = connect(
  state => ({
    initialValues: state.account.data // pull initial values from account reducer
  }),
  { load: loadAccount } // bind account loading action creator
)(AccountForm);

export default AccountForm;

如果可以在不使用redux模式的情况下完成此操作-甚至更好，我这里不需要太多逻辑...

还有一个小问题：从服务器加载数据时如何禁用“提交”按钮？

Answer 1

如果使用redux devtools查看沙箱，则可以看到axios调用完成后状态仍然为空。这是因为您是直接调用reducer函数，而不是通过dispatch传递。

我编辑了笔以说明解决方法：https://codesandbox.io/s/o94p6ono3z

对于禁用按钮，您必须自己处理常规的redux流程：在axios运行之前在化简器中设置一个变量，在axios完成后将其取消设置。然后像往常一样在react / redux中传递该变量。如果该变量为true，则将按钮设置为禁用。

这意味着您可以像在正常的redux上下文中那样操作，无论您是否具有redux格式。 redux-form提供的是submitting变量，您可以在表单提交时使用它来禁用按钮。

Redux表单：使用axios用来自顶级组件的数据填充表单的正确方法

1 个答案: