Question

我无法从 React 组件数组中删除某些元素。我有一些简单的应用程序，它只有一个按钮“添加表单”，当用户点击这个按钮时，新表单将添加名字和姓氏输入。如果用户想要删除此表单，用户只需单击删除按钮并从数组中删除此表单。然而，问题是每当用户点击某个表单上的删除时，最后一个元素就会一直被删除。但是如果您查看控制台，您可以看到已删除的表单已从状态中删除，但在 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>
  );
};

Sandbox

Answer 1

因为您将 index 用作 key。密钥将帮助反应知道应该更新哪个。所以你需要为每个组件提供一个唯一的值。

仅供参考：https://reactjs.org/docs/lists-and-keys.html

您的示例的快速修复：

let id = 0 // Introduce id variable

export default function App() {

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

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

把key改成id：

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

此后一切都会好起来

从一组项目中删除一个项目只会删除最后一个项目

1 个答案: