即使从阵列和本地存储中删除，列表项仍然可见

Question

我在子组件中有一个名为yes的按钮，我使用从父组件传递的props.id从数组和本地存储中删除列表项。

问题是，该项目已从阵列和本地存储中删除，但在我按下父组件中另一个项目的删除按钮之前，它在屏幕上仍然可见。

当我按下父组件中的删除按钮时，它会打开一个覆盖。当我按下覆盖上的"是"按钮时，我希望列表项立即从屏幕上删除。

这是子组件中的代码。

import React, { useCallback, useState } from "react";
import styles from "./Delete.module.css";
function Delete(props) {
//  console.log();
const store = props.store;
const [no, setNo] = useState(false);
let [deleted, setDelted] = useState(store);
console.log(deleted);
console.log("Length :" + store.length);
const noBtnHandler = () => {
console.log("clicked");
setNo(!no);
props.setDel(false);
};
const yesBtnHandler = () => {
console.log("Dlete.js :" + props.id);
const filteredStore = deleted.filter((task) => task.id !== props.id);
setDelted([...filteredStore]);
localStorage.removeItem(props.id);
//   console.log(deleted);
setNo(!no);
};
return (
<div className={`${no === false ? styles.del : styles.delOn}`}>
<section>
<div>
<h3>Are you Sure ?</h3>
</div>
<div>
<button type="button" onClick={yesBtnHandler}>
{" "}
Yes{" "}
</button>
<button type="button" onClick={noBtnHandler}>
{" "}
No{" "}
</button>
</div>
</section>
</div>
);
}
export default Delete;

Answer 1

您将存储从父组件传递到Delete组件，并在此处设置一个新状态"已删除"。所以您只在Delete组件上调用setDeleted，这不会影响父组件。

正确的实现是在父组件中拥有存储状态(如果您还没有)。它仍然与deleted状态相同，但可能有更好的名称。说const [store, setStore] = useState([])

定义一个函数来过滤掉特定的记录，就像在yesBtnHandler处理程序中一样。但是这个函数将在父组件中定义。以为例

const removeRecord = (id)  => {
const filteredStore = store.filter((task) => task.id !== id);
localStorage.removeItem(id);
setStore(filteredStore);
}

现在需要将a函数从父级传递给Delete组件，而不是传递整个存储。像

<Delete removeFunc= {() => { removeRecord(id) }} />

传递完这个函数后，您需要在yesBtnHandler函数中调用它。像

function Delete({removeFunc}) {
...
const yesBtnHandler = () => {
removeFunc();
setNo(!no);
};
}

Answer 2

尝试删除尾部。。。

const yesBtnHandler = () => {
console.log("Dlete.js :" + props.id);
const filteredStore = deleted.filter((task) => task.id !== props.id);
setDelted([filteredStore]);
//or setDelted(filteredStore);
localStorage.removeItem(props.id);
//   console.log(deleted);
setNo(!no);
};

Answer 3

我对此的理解是，您试图从子组件更改父组件的状态。如果这是你打算做的，那么你可以做以下事情：

1. 在父组件而不是子组件中定义function Delete(id) {...}
2. 接下来，您必须将函数和数组都传递给您的子组件，如下所示：<ChildComponent array={array} onDelete={Delete}，其中array是父组件中的数组，Delete是从数组中删除项的函数
3. 最后，在您的子组件中，通过正确传递props(即function ChildComponent({array, Delete}) {...})，您现在可以访问父组件中的数组，并按照自己的意愿对其进行实际修改。要在子组件中的yes按钮上激发事件侦听器，请执行以下操作：<button type="button" onClick={() => Delete(array.id)}> {" "} Yes{" "} </button>

我希望这将对有所帮助