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

【问题标题】：UseEffect does not rerender when remove data out of an array only upon adding data does it rerender当从数组中删除数据时，UseEffect 不会重新渲染，仅在添加数据时才会重新渲染
【发布时间】：2023-01-07 01:48:14
【问题描述】：

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 组件

我已经把*我认为问题可能出在哪里的符号

【问题讨论】：

标签： reactjs arrays local-storage splice

【解决方案1】：

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

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

以下是 handleDeleteButton 的样子：

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

【讨论】：

【解决方案2】：

filter 方法根据您提供的条件返回一个新数组。因此，在您的代码中，您实际上并没有改变cartItem 的状态。

const newCartItems = cartItem.filter(...);

然后使用返回值来设置您的购物车状态。

【讨论】：