reactjs - 从数组中删除数据时，UseEffect 不会重新渲染，仅在添加数据时才会重新渲染

Question

import React, { useEffect, useState } from 'react'
import { HiOutlineBackspace } from "react-icons/hi";
import {MdOutlineCancel} from 'react-icons/md'

const Cart = ({toggleCart}) => {
  const localStorageCart = JSON.parse(localStorage.getItem('MY_CART')) || []
  const [cartItem, setCartItem] = useState(localStorageCart)
*************************************  
  const handleDeleteButton = (index) => {
    cartItem.filter(cartItem[index])
    console.log(cartItem);
  }
**************************************
  useEffect(() =>{
    setCartItem(cartItem)
  },[cartItem])

  return (
    <div className='cartContainer'>
      <h1 style={{textAlign:"center"}}>Your Cart</h1>     
      <button 
      style={{backgroundColor:'transparent'}}
      onClick={toggleCart}
      >
        <HiOutlineBackspace/>
      </button>

      <div className='cartCardContainer'>  
      {cartItem.map((cartItem,index) =>{
        return(
          <div className="cartCard" key={index}>
            <img src={cartItem.img} alt="logo" id="img" />
            <h2>{cartItem.title}</h2>

            <div className="description">
              <h5>{cartItem.description}</h5>
            </div>

            <div className="priceCard"  >
              <h3>${cartItem.price}</h3>
            </div>
            <button onClick={() => handleDeleteButton(index)}>***********************
              <MdOutlineCancel/>
            </button>
        </div>
        )
      })}
        
      </div>
    </div>
  )
}

export default Cart

我正在开发电子商务“添加到购物车”功能。

通过使用 useEffect，我成功地在添加项目后重新呈现购物车，因为它是一个单页应用程序。

但是当我尝试 splice( ) cartItem 时，我听说这不是一个好的做法，我应该使用 filter( ) 代替，但我在这样做时遇到了麻烦，因为我尝试了很多方法，但过滤器没有按计划进行，否则就不会运行。

对于项目的这一部分，我使用了大量本地存储，因为它是 addToCart 组件

我在我认为可能出现问题的地方添加了*符号

Answer 1

过滤未正确实现。此外，您必须在从状态中过滤/删除项目后更新状态。

您可以使用splice()从数组中删除一个元素。

以下是 handleDeleteButton 的外观:

const handleDeleteButton = (index) => {
  cartItem.splice(index, 1)); // 1 means remove one item only
  setCartItem([...cartItem]);
}