reactjs - 从不渲染 ReactJS Hooks 的数组中删除一个项目

Question

我正在尝试使用索引从数组中删除一个项目，我正在将 Props 从父组件传递给子组件以执行此操作，现在我可以看到控制台日志它被删除了，但它没有渲染组件

我已经在 SandBox 中发布了代码，因为这里会很乱

链接:https://codesandbox.io/s/jovial-burnell-qkl7r

Answer 1

您正在从 props.listofapi 渲染数据，但更新数组时，您的更改不会更新，因为您更改了错误的数组。 .splice()从数组中删除/添加项目，您不必这样做 setArray(...array, temp); 但 setArray(tempArray);

使用 useEffect 将初始数据保存到数组中。

const deleteHandler = id => {
  console.log(id);
  const tempArray = [...array];
  // removes item from tempArray
  tempArray.splice(id, 1); 
  setArray(tempArray);
  console.log("temp array", tempArray);
};

React.useEffect(() => {
  // data from props to array here
  setArray(props.listofapi);
}, [props.listofapi]);

并映射数组而不是 props.listofapi

<TableBody>
      {array.map((row, index) => (
      ...

Example