javascript - 用 antd 响应动态表单值

Question

带有 react 和 antd 的动态表单让我望而却步。我已经在网上搜寻了无济于事的答案。这是一个代码笔，可以重现我遇到的问题:https://codepen.io/sethen/pen/RwrrmVw

从本质上讲，问题归结为当您想要遍历存储在状态中的一堆值时，如下所示:

class MyClass extends React.Component<{}, {}> {
  constructor(props) {
    super(props);

    this.state = {
      data: [
        { name: 'foo' },
        { name: 'bar' },
        { name: 'baz' }
      ]
    };
  }

您可以认为这些值是从某个远程 API 获取的。

如您所见，我有一个键为 name 的对象数组。在该州。在渲染周期中进一步向下是以下内容:

return data.map((value, index) => {
      const { name } = value;

      return (
        <Form key={ index } initialValues={ { name } }>
          <Form.Item name='name'>
            <Input type='text' />
          </Form.Item>

          <Button onClick={ this.handleOnDeleteClick.bind(this, index) }>Delete</Button>
        </Form>
      );

这会尝试遍历存储在状态中的值并将这些值放入输入中。它还添加了一个删除按钮来删除该项目。第一次渲染时，它会按照您的预期将值加载到输入值中。

问题是当您尝试删除其中一个项目时，例如中间的项目，它会删除下一个项目。问题的核心是渲染的行为与删除项目时的预期不同。我期望当我删除一个项目时，它会将它从状态中取出并加载剩下的那些。这不会发生。

我的问题是，如何在能够删除每个项目的同时使用 antd 以这种方式加载动态数据？

Answer 1

您分配的此表单中的主要错误 the key property作为数组索引，和 关于删除中间项 , 最后一个组件 将获得新 key .

在 React 中，更改 key 将 卸载 组件并丢失其状态。

Don’t pass something like Math.random() to keys. It is important that keys have a “stable identity” across re-renders so that React can determine when items are added, removed, or re-ordered. Ideally, keys should correspond to unique and stable identifiers coming from your data, such as post.id.

此外，在您的示例中，您实际上渲染了 三表而不是 单表和三个领域。

每 <form/> 在其内部状态中具有其表单字段的所有状态，因此您将拥有一个包含所有 input 的单个对象。其中的值(value)观。
Antd.Form只是这样的包装 form ，您可以获得 Form.Item onFinish 中的值例如回调。

class MyClass extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [{ name: "foo" }, { name: "bar" }, { name: "baz" }]
    };
  }

  handleOnDeleteClick = index => {
    this.setState({
      data: [
        ...this.state.data.slice(0, index),
        ...this.state.data.slice(index + 1)
      ]
    });
  };

  render() {
    const { data } = this.state;

    return (
      <Form>
        {data.map(({ name }, index) => {
          return (
            <Form.Item key={name}>
              <Input type="text" />
              <Button onClick={() => this.handleOnDeleteClick(index)}>
                Delete
              </Button>
            </Form.Item>
          );
        })}
      </Form>
    );
  }
}