如何从页面中删除数据但它不显示？

Question

我试图在删除组件时显示新数据，所以我想做的是，当我删除该数据时，它将不再显示在页面上，但是当我单击按钮时，我有错误“cart.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
       });
   }}

这是我的 table 显示数据的地方，但是当我点击按钮时出现错误

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> 
</>}

如何从页面中删除数据但它不显示？

How can I remove data from the page and it doesn't show?

reactjs

axios

use-state