如何從頁面中刪除數據並且它不顯示？

Question

當我刪除它時，我試圖在我的組件中顯示新數據，所以我想要做的是，當我刪除該數據時，它將不再顯示在頁面上，但是當我單擊按鈕時，我有一個錯誤“購物車。 map 不是一個函數”，我需要你的幫助來告訴我如何在我的頁面中顯示新數據並修復錯誤。

useEffect(() => {
    axios.get(url)
    .then(response=>{
        setCart(
            response.data
        );
    })
    .catch(e =>{
        console.log(e);
    })
}, [url])



 const handleDeleteItems = async(key, cart_id) =>{
   var yes = confirm("You are going to remove an item from your cart, are you sure you want to delete item?")

       if(yes===true){
       alert("succefull");
       const temp = [...cart];
       temp.splice(cart_id, 1);
       setCart({
           cart:temp
       });
   }}

這是我的表格，我在其中顯示數據，但是當我單擊按鈕時它給了我一個錯誤

return (
   <div>
       <Table>
           <thead>
               <tr>
                   <th>Name</th>
                   <th>Price</th>
                   <th>Action</th>
               </tr>
           </thead>
           <tbody>
           {cart.map((cart, key)=>{
               return(
                <tr key={cart.id}>
                <td>{cart.name}</td>
                <td>{cart.price}</td>
                <td>
                    <Button onClick={() => handleDeleteItems(key, cart.id)} variant="danger">Delete</Button>
                </td>
            </tr>
           )})}

           </tbody>
       </Table>
   </div>

Answer 1

首先，如果購物車數據為空或未初始化，您應該添加一個驗證以不嘗試加載購物車數據。 在此示例中，如果購物車為空，我們將顯示“尚無產品”。

{cart ? cart.map((cart, key)=>{
               return(
                <tr key={cart.id}>
                <td>{cart.name}</td>
                <td>{cart.price}</td>
                <td>
                    <Button onClick={() => handleDeleteItems(key, cart.id)} variant="danger">Delete</Button>
                </td>
            </tr>
           )}) : <>                     <td>No products yet.</td> 
</>}