Javascript Can'；t渲染变异数组中的元素-React

所以，我面临的问题是，当我在任何索引上单击delete按钮时，它只会删除最后一个元素 例如，如果我按下第一个删除按钮，它应该删除第一个输入和删除按钮，但它只删除最后一个元素。。。有什么不对劲吗

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>
    );
  }
);

函数应用程序（）{
const[names，setNames]=React.useState([
“第一”，
“第二”，
“第三”，
“第四”
]);
const onChange=（索引：number，editedName:string）=>{
常量mutatedNames=[…名称]；
mutatedNames[索引]=editedName；
集合名（变异名）；
};
函数onDelete（索引：编号）{
常量nameArr=[…名称]；
接头名称（索引1）；
设置名称（nameArr）；
}
返回(
{names.map（（名称，索引）=>(
))}
);
}
const Child=React.memo(
（{name，index，onChange，onDelete}）=>{
返回(
onChange（索引，event.target.value）}
/>
onDelete（索引）}>delete
);
}
);

如果您使用的是部分受控输入，这几乎不是一个好主意

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

onChange（index，event.target.value）}/>

---

我建议您阅读有关表单和的官方指南。

如果您使用的是部分受控输入，这几乎不是一个好主意

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

onChange（index，event.target.value）}/>

---

我建议您阅读有关表单和的官方指南。

我建议为名称指定唯一ID/或使用字符串比较，并使用字符串比较过滤数组以删除已“删除”的元素。使用索引会出现一个问题，即删除元素时目标数组的大小会发生变化。考虑一个具有3个元素的数组，如果元素被渲染为0的索引被删除，那么尝试删除用索引2渲染的元素将失败，因为现在被操作的数组已经被索引0元素的原始删除缩短了。但这不一定是最佳实践。您描述的@BooklynDadCore问题在这里不是问题，因为呈现的数组将始终与状态中的数组匹配。我建议为名称指定唯一ID/或使用字符串比较并使用这些ID筛选数组以删除已“删除”的元素。使用索引会出现一个问题，即删除元素时目标数组的大小会发生变化。考虑一个具有3个元素的数组，如果元素被渲染为0的索引被删除，那么尝试删除用索引2渲染的元素将失败，因为现在被操作的数组已经被索引0元素的原始删除缩短了。但这不一定是最佳实践。您描述的@BooklynDadCore问题在这里不是问题，因为渲染的数组将始终与状态中的数组匹配。我已经这样做了，但我必须使用DefaultValues执行此操作，这可能就是您遇到问题的原因。在受控场景中（当您处理

onChange

），您需要设置

值

。问题是，除非您使用名称，否则虚拟dom将是相同的，因为您在渲染中的任何位置都没有使用名称，所以它将只渲染一个包含3个元素的数组，这样您将看到像最后一个元素消失一样的输出，@MarcellToth good find:）我已经这么做了，但我必须用defaultvalues这样做，这可能就是你遇到问题的原因。在受控场景中（当您处理

onChange

），您需要设置

值

。问题是，除非您使用名称，否则虚拟dom将是相同的，因为您在渲染中的任何位置都没有使用名称，所以它将只渲染一个包含3个元素的数组，这样您将看到像最后一个元素消失一样的输出，@MarcellToth好发现：）