您需要在每次模态启动时为表单中的字段生成动态键。
这里有一个沙盒可以玩。如果不对键进行任何更改，模态将保留其中的值。如果更改键并启动模式，则该值将被清除。
Sandbox Link

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Modal, Button, Input } from "antd";

class App extends React.Component {
  state = { visible: false, theKey: "dummy" };

  showModal = () => {
    this.setState({
      visible: true
    });
  };

  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false
    });
  };

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false
    });
  };

  handleChange = ({ target: { value } }) => {
    this.setState({ theKey: value });
  };

  render() {
    return (
      <>
        <Input onChange={this.handleChange} placeholder="key for input field"/>
        <br />
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Input
            key={this.state.theKey}
            style={{ backgroundColor: "#e6f9ff" }}
            name="articleName"
          />
        </Modal>
      </>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

在这里，我们将使用一个自定义钩子，它从其他地方（比如第三方UI库） Package ModalDialog组件，并返回一个setter和一个自包含component/null的元组。钩子使这变得更整洁，但您仍然可以使用类组件完成所有这些，代价是有点冗长。由于您标记了Typescript，这应该很简单，但您可能必须指定useState的使用是useState<React.ReactChild>();，以避免类型错误。

const useDialog = (ModalComponent) => {
  const [modalDialogState, setModalDialogState] = useState();
  return modalDialogState
    ? [
      setModalDialogState,
      // You may have to tweak this a bit depending on
      // how your library works.
      () => (
        <ModalComponent onClose={() => setModalDialogState('')> 
          {modalDialogState}
        </ModalComponent>
      ),
    ]
    : [setModalDialogState, null];
};

const MyComponent = () => {
  const [setModal, Modal] = useDialog(WhateverLibraryComponent);
  useEffect(() => {
    // Cleanup function, run on unMount and clears dialog contents.
    return () => setModal('');
  }, [setModal]);

  return Modal
    ? (
      <>
        <Modal />
        /* Normal render stuff */
      </>
    )
    // You can optionally render a button here with onClick
    // set to a function that calls setModal with some 
    // appropriate contents.
    : (/* Normal render stuff */)
};

表单状态由useForm在Modal之外维护。
“destroyOnClose”是Modal中的API，因此它只处理与Modal相关的逻辑，而不是Form。
在antd 4.5版本以上，你可以简单地使用“保留” prop 。例如：

<Modal destroyOnClose>
    <Form preserve={false} />
</Modal />