Javascript 使用antd反应动态表单值

带有react和antd的动态表单让我难以理解。我在网上搜寻答案，但毫无结果。这是一个代码笔，它再现了我正在讨论的问题：

本质上，问题归结为您希望循环存储在状态中的一组值，如下所示：

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

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

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

问题是，当您尝试删除其中一个项目（如中间的项目）时，它将删除下一个项目。问题的核心是渲染的行为与我在删除项目时预期的不同。我希望当我删除一个项目时，它会使其脱离状态并加载剩下的项目。这并没有发生

---

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

此表单中您指定为数组索引的主要错误，并且在删除中间项时，最后一个组件将获得一个新键

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

不要将类似

Math.random（）

的内容传递给键。关键点在重新渲染时具有“稳定标识”非常重要，以便React可以确定何时添加、删除或重新排序项。理想情况下，键应该对应于来自数据的唯一且稳定的标识符，例如

post.id

另外，在您的示例中，您实际上渲染了三个表单，而不是单个表单和三个字段

每个表单字段的内部状态都有其表单字段的所有状态，因此您将有一个包含所有

输入值的单个对象

Antd.Form
仅仅是这样一个包装器，例如，您可以在
onFinish
回调中获得
Form.Item
值

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>
    );
  }
}

类MyClass扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[{name:“foo”}，{name:“bar”}，{name:“baz”}]
};
}
handleOnDeleteClick=索引=>{
这是我的国家({
数据：[
…this.state.data.slice（0，索引），
…this.state.data.slice（索引+1）
]
});
};
render（）{
const{data}=this.state；
返回(
{data.map（（{name}，index）=>{
返回(
此.handleOnDelete单击（索引）}>
删除
);
})}
);
}
}

啊，当然。。。重新渲染时的关键点更改！非常感谢你。关于带有antd的表单，我应该只加载一个表单还是多个表单？我添加了额外的解释
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>
    );
  }
}