Javascript React hooks-如何正确更新和渲染元素

当我按下delete按钮时，它每次只删除最后一个元素，而不考虑索引。 我怎样才能做到这一点？如果不将子组件中的

更改为

，我已经使用

完成了，但是如何使用输入的

值

属性来完成

export const App = () => {
  const [names, setNames] = React.useState([
    "First",
    "Second",
    "third",
    "fourth",
  ]);
  const onChange = (params) => {
    doing(params); // etc.
  };
  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={handleDelete}
        />
      ))}
    </div>
  );
};

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

export const App=（）=>{
const[names，setNames]=React.useState([
“第一”，
“第二”，
“第三”，
“第四”，
]);
const onChange=（参数）=>{
正在做（参数）；//等等。
};
函数onDelete（索引：编号）{
常量nameArr=[…名称]；
接头名称（索引1）；
设置名称（nameArr）；
}
返回(
{names.map（（名称，索引）=>(
))}
);
};
const ChildComponent=React.memo（{name，index，onChange，onDelete}）=>{
返回(
onChange（索引，event.target.value）}
/>
onDelete（索引）}>delete
);
});

您的代码中有输入错误（

onDelete

和

handleDelete

），但这不是主要问题。您的问题是使用

索引

作为

键

。由于要删除附加到状态的某些元素，React无法决定如何再次对数组进行排序，因为此处的

索引不可信

您应该为键使用一些唯一的值，如果没有，您应该以某种方式创建它们。在下面的示例中，我尝试将
索引
与值混合使用：

key={`${index}${name}`}

另外，不要使用类似的方法，因为它们会改变状态<代码>拼接

在适当位置更改元素，以便进行突变。我用过，但你可以用任何其他方法，它不会改变状态

函数应用程序（）{
const[names，setNames]=React.useState([
“第一”，
“第二”，
“第三”，
“第四”
]);
函数onDelete（索引）{
集合名（（prev）=>prev.filter（（u，i）=>i！==index））；
}
返回(
{names.map（（名称，索引）=>(
))}
);
}
const ChildComponent=React.memo（{name，index，onChange，onDelete}）=>{
返回(
onChange（索引，event.target.value）}
/>
onDelete（索引）}>delete
);
});
ReactDOM.render(
,
document.getElementById（“根”）
);
您正在将未定义的函数
handleDelete
传递给子组件-您定义的函数称为
onDelete