Question

所以，我面临的问题是，当我在任何索引处单击删除按钮时，它只会删除最后一个元素例如，如果我按下第一个删除按钮，它应该删除第一个输入和删除按钮，但是这样做是因为它仅删除了最后一个元素...这可能是错误的？

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

您正在使用部分控制的输入，这几乎从来不是一个好主意。

使其完全受控，如下所示：

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

我建议您阅读有关表格和Controlled Components和article about the uncontrolled scenario的官方指南。

无法渲染突变数组中的元素-React

1 个答案: