javascript - 更新组件状态后 useEffect 未触发

Question

我正在制作一个简单的电子商务网站，但我遇到了一个问题，即 useEffect() 在进行状态更改后不会触发。我将包含的这段代码片段用于网站的“购物车”，并使用 localStorage 将所有商品存储在购物车中。当 QuantChange() 函数中的数量发生变化时，我的状态会发生变化，但不会触发 useEffect()。当我在更改项目数量后刷新页面时，新数量不会保留，而是显示旧数量。我究竟做错了什么？提前致谢。

import React, { useState, useEffect } from 'react';
import { SetQuantity } from '../utils/Variables';
import { CartItem } from './CartItem';

const CartView = () => {
    const [state, setState] = useState(
        JSON.parse(localStorage.getItem('cart-items'))
            ? JSON.parse(localStorage.getItem('cart-items'))
            : []
    );

    useEffect(() => {
        console.log('Updating!');
        updateLocalStorage();
    });

    const updateLocalStorage = () => {
        localStorage.setItem('cart-items', JSON.stringify(state));
    };

    const quantChange = (event) => {
        setState((prevState) => {
            prevState.forEach((item, index) => {
                if (item._id === event.target.id) {
                    item.quantity = SetQuantity(parseInt(event.target.value), 0);
                    prevState[index] = item;
                }
            });

            return prevState;
        });
    };

    const removeItem = (id) => {
        setState((prevState) => prevState.filter((item) => item._id != id));
    };

    // Fragments need keys too when they are nested.
    return (
        <>
            {state.length > 0 ? (
                state.map((item) => (
                    <CartItem
                        key={item._id}
                        ID={item._id}
                        name={item.name}
                        quantity={item.quantity}
                        changeQuant={quantChange}
                        delete={removeItem}
                    />
                ))
            ) : (
                <h1 className="text-center">Cart is Empty</h1>
            )}
        </>
    );
};

export default CartView;

import React, { Fragment } from 'react';
import { MAX_QUANTITY, MIN_QUANTITY } from '../utils/Variables';

export const CartItem = (props) => {
    return (
        <>
            <h1>{props.name}</h1>
            <input
                id={props.ID}
                type="number"
                max={MAX_QUANTITY}
                min={MIN_QUANTITY}
                defaultValue={props.quantity}
                onChange={props.changeQuant}
            />
            <button onClick={() => props.delete(props.ID)} value="Remove">
                Remove
            </button>
        </>
    );
};

export const MIN_QUANTITY = 1;

export const MAX_QUANTITY = 99;

// Makes sure the quantity is between MIN and MAX
export function SetQuantity(currQuant, Increment) {
    if (Increment >= 0) {
        if (currQuant >= MAX_QUANTITY || (currQuant + Increment) > MAX_QUANTITY) {
            return MAX_QUANTITY;
        } else {
            return currQuant + Increment;
        }
    } else {
        if (currQuant <= MIN_QUANTITY || (currQuant + Increment) < MIN_QUANTITY) {
            return MIN_QUANTITY;
        } else {
            return currQuant + Increment;
        }
    }
}

Answer 1

您不会返回新 状态，您是在 forEach 处理它并改变现有状态并返回当前状态。将前一个状态映射到下一个状态，并为通过 id 匹配的 item 创建并返回一个新的 item 对象引用。

const quantChange = (event) => {
  const { id, value } = event.target;
  setState((prevState) => {
    return prevState.map((item) => {
      if (item._id === id) {
        return {
          ...item,
          quantity: SetQuantity(parseInt(value), 0)
        };
      }
      return item;
    });
  });
};

然后，对于您希望由此更新状态触发的任何 useEffect Hook 回调，都需要将该状态作为依赖项。

useEffect(() => {
  console.log('Updating!');
  updateLocalStorage();
}, [state]);