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

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

尝试删除尾随...

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 2

您正在将存储从父组件传递到 Delete 组件并在此处设置新状态 'deleted'。所以你只调用 Delete 组件上的 setDeleted 不会影响父组件。

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

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

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

您现在需要将函数从父级传递给 Delete 组件，而不是传递整个商店。喜欢

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

传递这个函数后，你需要在你的yesBtnHandler函数中调用它。喜欢

  function Delete({removeFunc}) {

     ...

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

  }

Answer 3

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

在父组件而不是子组件中定义 function Delete(id) {...}。
接下来，您必须将函数和数组都传递给子组件，如下所示：<ChildComponent array={array} onDelete={Delete}，其中数组是父组件中的数组，Delete 是要删除的函数数组中的一项。
最后，在您的子组件中，正确传递了 props，即 function ChildComponent({array, Delete}) {...}您现在可以访问父组件中的数组，并根据需要实际修改它。要在子组件中的是按钮上触发事件侦听器，请执行以下操作：<button type="button" onClick={() => Delete(array.id)}> {" "} Yes{" "} </button>

希望对您有所帮助

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

List Item is Still visible even after deleting from array as well as local storage

javascript

reactjs