Javascript 如何从数组中动态删除元素？React.js

有两个组件，我想使用

useContext

钩子实现一个元素数组，但是当单击按钮时，元素没有被删除，相反，它们更多。告诉我这里怎么了。我将非常感激

第一部分：

import React from 'react';
import CartItem from './CartItem';
import Context from '../Context'; 

function Cart() {
    let sum = 0;
    let arrPrice = [];
    let [products, setProducts] = React.useState([]);
    let loacalProsucts = JSON.parse(localStorage.getItem('products'));

    if(loacalProsucts === null) {
        return(
            <div className="EmptyCart">
                <h1>Cart is empty</h1>
            </div>
        )
    } else {
        {loacalProsucts.map(item => products.push(item))}
        {loacalProsucts.map(item => arrPrice.push(JSON.parse(item.total)))}
    }

    for(let i in arrPrice) {
        sum += arrPrice[i];
    }

    function removeItem(id) {
        setProducts(
            products.filter(item => item.id !== id)
        )
    }

    return(
        <Context.Provider value={{removeItem}}>
            <div className="Cart">
                <h1>Your purchases:</h1>
                <CartItem products = {products} />
                <h1>Total: {sum}$</h1>
            </div>
        </Context.Provider>
    )
}

import React, { useContext } from 'react';
import Context from '../Context';

function CartList({products}) {
    const {removeItem} = useContext(Context);
    return(
        <div className="CartList">
            <img src={products.image} />
            <h2>{products.name}</h2>
            <h3 className="CartInfo">{products.kg}kg.</h3>
            <h2 className="CartInfo">{products.total}$</h2>
            <button className="CartInfo" onClick={() => removeItem(products.id)}>&times;</button>
        </div>
    );
}

export default CartList;

---

补充上述评论^^

在渲染循环内部（即挂钩外部）有初始化表达式几乎总是一个错误。您还希望避免改变本地状态，这就是useState返回setter的原因

完全未经测试：

function Cart() {
  let [sum, setSum] = React.useState();
  const loacalProsucts = useMemo(() => JSON.parse(localStorage.getItem('products')));
  // Init products with local products if they exist
  let [products, setProducts] = React.useState(loacalProsucts || []);

  useEffect(() => {
    // This is actually derived state so the whole thing
    // could be replaced with
    // const sum = products.reduce((a, c) => a + c?.total, 0);
    setSum(products.reduce((a, c) => a + c?.total, 0));
  }, [products]);

  function removeItem(id) {
    setProducts(
      products.filter(item => item.id !== id)
    )
  }

...

---

渲染循环中的所有代码，如

products.push（item）

将在每次组件渲染时运行。这就是React挂钩的作用。

function Cart() {
  let [sum, setSum] = React.useState();
  const loacalProsucts = useMemo(() => JSON.parse(localStorage.getItem('products')));
  // Init products with local products if they exist
  let [products, setProducts] = React.useState(loacalProsucts || []);

  useEffect(() => {
    // This is actually derived state so the whole thing
    // could be replaced with
    // const sum = products.reduce((a, c) => a + c?.total, 0);
    setSum(products.reduce((a, c) => a + c?.total, 0));
  }, [products]);

  function removeItem(id) {
    setProducts(
      products.filter(item => item.id !== id)
    )
  }

...