Question

我的父组件使用钩子 useEffect 从 API 获取数据并将道具传递给子组件。

const ParentComoponent = () => {
  const [adsData, setAdsData] = useState([]);

  useEffect(() => {
    api
      .get(`MyUrl`, { headers: authHeader() })
      .then((res) => {
        console.log(res);
        setAdsData(res.data.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return <Child adsData={adsData} />;
};

My Child 组件具有 handleDeleteClick 函数，用于从 API 中删除请求

const Child = () => {
  const [deletedItem, setDeletedItem] = useState("");

  const handleDeleteClick = (e, id) => {
    e.preventDefault();
    axios
      .delete(`MyUrl`, { params: { id: id } })
      .then((res) => console.log(res))
      .catch((err) => console.log(err));
  };

  return (
    <div>
      // array.map Items list
      <a
        href=""
        onClick={(e) => handleDeleteClick(e, ads.id)}
        className="tables__link"
      >
        Delete
      </a>
    </div>
  );
};

删除请求成功，但我的列表没有更新。删除项目后如何更新我的项目列表？

Answer 1

您需要传递另一个在执行删除时调用的函数。类似的东西：

const ParentComoponent = () => {
  const [adsData, setAdsData] = useState([]);

  const fetchData = () => {
    api
      .get(`MyUrl`, { headers: authHeader() })
      .then((res) => {
        console.log(res);
        setAdsData(res.data.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const onDelete = () => {
    fetchData();
  };

  useEffect(() => {
    fetchData();
  }, []);

  return <Child adsData={adsData} onDelete={fetchData} />;
};

const Child = (props) => {
  const [deletedItem, setDeletedItem] = useState("");

  const handleDeleteClick = (e, id) => {
    e.preventDefault();
    axios
      .delete(`MyUrl`, { params: { id: id } })
      .then((res) => {
        console.log(res);
        props.onDelete();
      })
      .catch((err) => console.log(err));
  };

  return (
    <div>
      // Items list
      <a
        href=""
        onClick={(e) => handleDeleteClick(e, ads.id)}
        className="tables__link"
      >
        Delete
      </a>
    </div>
  );
};

Answer 2

将您的删除功能放在父级中并将其传递给子级。然后删除后，在父级中更新您的列表。

<ParentComponent>

const [adsData, setAdsData] = useState([]);
    
const handleDeleteClick = (e, id) => {
    e.preventDefault();
    axios
        .delete(`MyUrl`, {params: {id: id}})
        .then(res => {
            console.log(res)
            //TODO:: Implement list.pop or similar
            })
        .catch(err => console.log(err));
};

useEffect(() => {
    api.get(`MyUrl`, { headers: authHeader() })
        .then(res => {
            console.log(res);
            setAdsData(res.data.data);
        })
        .catch(err => {
            console.log(err);
        })
}, []);
return (
  <Child
    adsData={adsData}
    handleClick={handleDeleteClick}
  />
)
</ParentComponent>

return (
<div>
 // array.map Items list
     <a href="" onClick={(e) => 
      handleDeleteClick(e, ads.id)}className="tables__link">Delete</a>
</div>
)```

更新状态后的 useEffect

2 个答案: