如何更改Antd表单initialValues取决于url或ID？

Question

我得到了与Antd表单相同的组件，用于添加/编辑文章。路由器中有路由

<Route path="/add" component={ !currentUser ? Login : ArticleEditor } />
<Route path="/article/:id/edit" component={ !currentUser ? Login : ArticleEditor } />

当我单击“编辑”按钮时，我将初始化值添加到表单中，而如果我单击“创建新文章”，则url更改为“/add”，但表单没有更新值。值保留在已编辑的文章中。如何更新表单值？尝试设置initialValues依赖于路径或“id”，但它不起作用。在这种情况下如何更新antd表单值？

const initialValues = this.props.location.pathname === '/add' ? {} : {
      title: this.props?.title,
      body: this.props?.body,
      description: this.props?.description
    };

在这里可以看到组件代码-codesandbox链接

Answer 1

该代码的主要问题是，更改url时不会重置表单字段，您可以在ShouldComponentUpdate中检测路径更改，并将IsLoading设置为True，rest应该工作。

更新initialValues将不起作用，因为antd执行浅层比较，并且一旦设置了initialValues，您将无法更改它们。

在componentdidupdate的逻辑中有一个问题，我也更正了这个问题。

import React from "react";
import ErrorsList from "../ErrorsList/ErrorsList";
import userService from "../../services/userService";
import { connect } from "react-redux";
import { push } from "react-router-redux";
import { Form, Input, Button } from "antd";
import { store } from "../../store";
import actionCreators from "../../actionCreators";

const formItemLayout = {
  labelCol: { span: 24 },
  wrapperCol: { span: 24 }
};

const formSingleItemLayout = {
  wrapperCol: { span: 24, offset: 0 }
};

const mapStateToProps = (state) => ({
  ...state.editor
});

const mapDispatchToProps = (dispatch) => ({
  onLoad: (payload) => dispatch(actionCreators.doEditorLoaded(payload)),
  onUnload: () => dispatch(actionCreators.doEditorUnloaded()),
  onUpdateField: (key, value) =>
    dispatch(actionCreators.doUpdateFieldEditor(key, value)),
  onSubmit: (payload, slug) => {
    dispatch(actionCreators.doArticleSubmitted(payload));
    store.dispatch(push(`/`)); //article/${slug}
  },
  onRedirect: () => dispatch(actionCreators.doRedirect())
});

class ArticleEditor extends React.Component {
  constructor(props) {
    super(props);
    this.id = this.props.match.params.id;
    const updateFieldEvent = (key) => (e) =>
      this.props.onUpdateField(key, e.target.value);
    this.changeTitle = updateFieldEvent("title");
    this.changeDescription = updateFieldEvent("description");
    this.changeBody = updateFieldEvent("body");
    this.changeTagInput = updateFieldEvent("tagInput");
    this.isLoading = true;

    this.submitForm = () => {
      const article = {
        title: this.props.title,
        description: this.props.description,
        body: this.props.body,
        tagList: this.props.tagInput.split(",")
      };

      const slug = { slug: this.props.articleSlug };
      const promise = this.props.articleSlug
        ? userService.articles.update(Object.assign(article, slug))
        : userService.articles.create(article);

      this.props.onSubmit(promise, this.props.articleSlug);
    };
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.props.match.params.id !== prevProps.match.params.id) {
      if (prevProps.match.params.id) {
        this.props.onUnload();
      }

      this.id = this.props.match.params.id;
      if (this.id) {
        return this.props.onLoad(userService.articles.get(this.id));
      }

      this.props.onLoad(null);
    }

    this.isLoading = false;
  }

  componentDidMount() {
    if (this.id) {
      this.isLoading = true;
      return this.props.onLoad(userService.articles.get(this.id));
    }
    this.isLoading = false;
    this.props.onLoad(null);
  }

  componentWillUnmount() {
    this.props.onUnload();
  }

  shouldComponentUpdate(newProps, newState) {
    if (this.props.match.params.id !== newProps.match.params.id) {
      this.isLoading = true;
    }

    return true;
  }

  render() {
    const { errors } = this.props;
    const initialValues = {
      title: this.props?.title,
      body: this.props?.body,
      description: this.props?.description,
      tags: this.props?.tagList
    };

    return this.isLoading ? (
      "loading..."
    ) : (
      <div className="editor-page">
        <div className="container page">
          <div className="">
            <div className="">
              <ErrorsList errors={errors}></ErrorsList>
              <Form
                {...formItemLayout}
                initialValues={initialValues}
                onFinish={this.submitForm}
              >
                <Form.Item
                  label="Title"
                  name="title"
                  placeholder="Article Title"
                  rules={[
                    {
                      required: true,
                      message: "Please input article title"
                    }
                  ]}
                >
                  <Input onChange={this.changeTitle} />
                </Form.Item>
                <Form.Item
                  label="Description"
                  name="description"
                  placeholder="Short description"
                  rules={[
                    {
                      required: true,
                      message: "Please input article description"
                    }
                  ]}
                >
                  <Input onChange={this.changeDescription} />
                </Form.Item>
                <Form.Item
                  name="body"
                  label="Article Text"
                  placeholder="article text"
                >
                  <Input.TextArea onChange={this.changeBody} />
                </Form.Item>
                <Form.Item name="tags" label="Tags" placeholder="Enter tags">
                  <Input onChange={this.changeTagInput} />
                </Form.Item>
                <Form.Item {...formSingleItemLayout}>
                  <Button
                    className="editor-form__btn"
                    type="primary"
                    htmlType="submit"
                    disabled={this.props.inProgress}
                  >
                    Submit Article
                  </Button>
                </Form.Item>
              </Form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ArticleEditor);

看看这个分叉的CodeSandBox。