Javascript 从项数组中删除项只会删除最后一项

我在从React组件数组中删除某些元素时遇到问题。 我有一些简单的应用程序，它只有一个按钮“添加表单”，当用户点击这个按钮，新表单 将添加具有firstname和lastname的输入。如果用户想要删除此表单，用户只需单击“删除”按钮并从数组中删除此表单。然而，问题是，每当用户在某个表单上单击delete时，最后一个元素总是被删除。但如果您查看控制台，您可以看到删除的表单已从状态中删除，但在UI中最后一个元素已删除。 示例代码：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [forms, setForms] = useState([]);

  const addNewForm = () => {
    setForms([
      ...forms,
      {
        valuesOfForm: { firstname: "", lastname: "" }
      }
    ]);
  };

  const handleChangeForms = (name, value, index) => {
    const values = [...forms];
    values[index].valuesOfForm[name] = value;
    setForms([...values]);
  };

  const handleDeleteForms = (index) => {
    const values = [...forms];
    values.splice(index, 1);
    setForms([...values]);
  };

  return (
    <div className="App">
      <div>
        <button onClick={addNewForm}>Add new form</button>
        {console.log(forms)}
        {forms.map((form, index) => (
          <SomeForm
            value={form.valuesOfForm}
            key={index}
            index={index}
            handleChangeForms={handleChangeForms}
            handleDeleteForms={handleDeleteForms}
          />
        ))}
      </div>
    </div>
  );
}

const SomeForm = (props) => {
  const [value, setValue] = useState(props.value);
  const onFormChange = (event) => {
    props.handleChangeForms(event.target.name, event.target.value, props.index);
    setValue({ ...value, [event.target.name]: event.target.value });
  };

  const onClick = (event) => {
    event.preventDefault();
    props.handleDeleteForms(props.index);
  };

  return (
    <form onChange={onFormChange}>
      <input
        type="text"
        name="firstname"
        placeholder="first name"
        onChange={onFormChange}
        value={value.firstname}
      />
      <input
        type="text"
        name="lastname"
        placeholder="last name"
        value={value.lastname}
      />
      <button onClick={onClick}>Delete form</button>
    </form>
  );
};

从“react”导入{useState}；
导入“/styles.css”；
导出默认函数App（）{
const[forms，setForms]=useState（[]）；
const addNewForm=（）=>{
地形学([
…表格，
{
值形式：{firstname:，lastname:}
}
]);
};
常量handleChangeForms=（名称、值、索引）=>{
常量值=[…形式]；
值[索引]。值形式[名称]=值；
集合形式（[…值]）；
};
常量handleDeleteForms=（索引）=>{
常量值=[…形式]；
拼接值（索引1）；
集合形式（[…值]）；
};
返回(
添加新表单
{console.log（forms）}
{forms.map（（表单，索引）=>(
))}
);
}
const SomeForm=（道具）=>{
const[value，setValue]=使用状态（props.value）；
const onFormChange=（事件）=>{
props.handleChangeForms（event.target.name、event.target.value、props.index）；
setValue（{…value[event.target.name]：event.target.value}）；
};
const onClick=（事件）=>{
event.preventDefault（）；
道具.手持电子表格（道具索引）；
};
返回(
删除表格
);
};

---

因为您正在使用

索引
作为
键
。该键将帮助您知道应该更新哪一个。因此，您需要为每个组件提供唯一的值

供参考：

您的示例的快速修复：

let id = 0 // Introduce id variable

export default function App() {

每次添加新项目时增加Id：

  const addNewForm = () => {
    id++;
    setForms([
      ...forms,
      {
        id,
        valuesOfForm: { firstname: "", lastname: "" }
      }
    ]);
  };

将密钥更改为id:

<SomeForm
  value={form.valuesOfForm}
  key={form.id}
  index={index}

因为您正在使用
索引
作为
键
。该键将帮助您知道应该更新哪一个。因此，您需要为每个组件提供唯一的值

供参考：

您的示例的快速修复：

let id = 0 // Introduce id variable

export default function App() {

每次添加新项目时增加Id：

  const addNewForm = () => {
    id++;
    setForms([
      ...forms,
      {
        id,
        valuesOfForm: { firstname: "", lastname: "" }
      }
    ]);
  };

将密钥更改为id:

<SomeForm
  value={form.valuesOfForm}
  key={form.id}
  index={index}