Question

有两个组件，我想使用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;

具有上下文的组件：

import React from 'react';

const Context = React.createContext();

export default Context;

Answer 1

在^^

上方添加评论

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

完全未经测试：

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

...

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

1 个答案: