javascript - 动态删除元素

Question

我在删除元素时遇到问题。它不会删除特定元素，而只会删除最后一个新创建的元素。我不确定我哪里出错了。我引用了 this tutorial这显示了我有点想做的事情。 (我是 React 新手)

import React,{useState, useRef} from "react";


const Body = () => {
    const [list, setList] = useState([]);

    const AddInput = () => {
        setList([...list, {placeholder:"Class Name"}]);
    };

    const DeleteInput = (index) => {
        const l = [...list];
        l.splice(index,1);
        setList(l);
    };

    const InputChangeHandler = (event, index) => {
        const l = [...list];
        (l[index]).value = event.target.value;
        setList(l);
    };

    return (
        <div>
            <button onClick={AddInput}>Add</button>
            {list.map((item, key)=> 
                <div key={key}>
                    <input type={"text"} id={key} placeholder={item.placeholder} onChange={e=>InputChangeHandler(e, key)}/>
                    <button id={key} onClick={() => DeleteInput(key)}>Delete</button>
                </div>
            )}
        </div>
    );
}

export default Body;

元素(输入框+按钮):

删除上次创建的:

Answer 1

我认为主要问题是你设置的项目的关键，因为 react 文档说:

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

We don’t recommend using indexes for keys if the order of items maychange. This can negatively impact performance and may cause issueswith component state. Check out Robin Pokorny’s article for anin-depth explanation on the negative impacts of using an index as akey. If you choose not to assign an explicit key to list items thenReact will default to using indexes as keys.

如本 Article说:

Reordering a list, or adding and removing items from a list can cause issues with the component state, when indexes are used as keys. If the key is an index, reordering an item changes it. Hence, the component state can get mixed up and may use the old key for a different component instance.

What are some exceptions where it is safe to use index as key?

-If your list is static and will not change.

-The list will never be re-ordered.

-The list will not be filtered (adding/removing items from the list).

-There are no ids for the items in the list.

如果您使用一些计数器或 ID 生成器在您的项目中设置一个可靠的 key ，您的问题就会解决。

像这样:

export default function App() {
  const [list, setList] = useState([]);
  const id = useRef({ counter: 0 });

  const AddInput = () => {
    console.log(id);
    setList([...list, { placeholder: "Class Name", id: id.current.counter++ }]);
  };

  const DeleteInput = (id) => {
    setList(list.filter((item, i) => item.id !== id));
  };

  const InputChangeHandler = (event, index) => {
    const l = [...list];
    l[index].value = event.target.value;
    setList(l);
  };

  return (
    <div>
      <button onClick={AddInput}>Add</button>
      {list.map((item, key) => (
        <div key={item.id}>
          <input
            type={"text"}
            id={key}
            placeholder={item.placeholder}
            onChange={(e) => InputChangeHandler(e, key)}
          />
          <button id={item.id} onClick={() => DeleteInput(item.id)}>
            Delete
          </button>
        </div>
      ))}
    </div>
  );
}