无法从变异数组渲染元素 - React

Question

So, the problem I've faced is that when I click delete button at any index it just deletes last element for example, if I press first delete button, it should remove first input and the delete button, but what it does is that it deletes last element only... What could be wrong?

function App() {
  const [names, setNames] = React.useState([
    "First",
    "Second",
    "third",
    "fourth"
  ]);

  const onChange= (index: number, editedName: string) => {
    const mutatedNames = [...names];
    mutatedNames[index] = editedName;
    setNames(mutatedNames);
  };

  function onDelete(index: number) {
    const nameArr = [...names];
    nameArr.splice(index, 1);
    setNames(nameArr);
  }


  return (
    <div>
      {names.map((name, index) => (
        <ChildComponent
          key={index}
          name={name}
          index={index}
          onChange={onChange}
          onDelete={onDelete}
        />
      ))}
    </div>
  );
}



const Child = React.memo(
  ({ name, index, onChange, onDelete }) => {
    return (
      <div>
        <input
          onChange={(event) => onChange(index, event.target.value)}
        />
        <button onClick={() => onDelete(index)}>delete</button>
      </div>
    );
  }
);

Answer 1

You are using a partially controlled input, this is almost never a good idea.

Make it fully controlled like so:

<input
  value={name}
  onChange={(event) => onChange(index, event.target.value)} />

I suggest you read the official guidelines about Forms and Controlled Components and the article about the uncontrolled scenario .