React组件更新状态后useEffect未触发 购物车数量修改后不持久化

1. 状态原地变更导致React未识别更新 #

你在quantChange方法中直接修改了prevState原数组和数组内的item对象，最终返回的仍是原数组的引用。React对状态做浅比较判断是否需要重渲染，引用不变的情况下会认为状态没有变更，因此不会触发重渲染和后续useEffect执行，localStorage自然不会更新。

修复后quantChange代码：

const quantChange = (event) => {
    const targetId = event.target.id;
    const inputValue = parseInt(event.target.value);
    setState((prevState) => {
        // 返回全新数组，不修改原状态
        return prevState.map(item => {
            if (item._id === targetId) {
                // 修改的项返回全新对象，不原地修改原item
                return {
                    ...item,
                    quantity: SetQuantity(inputValue, 0)
                }
            }
            return item;
        })
    });
};

2. useEffect缺少显式依赖 #

你当前的useEffect未传依赖数组，虽然理论上每次重渲染都会执行，但显式添加依赖可以明确触发条件，也能避免ESLint语法警告：

useEffect(() => {
    console.log('Updating!');
    updateLocalStorage();
}, [state]); // 仅在state变更时更新localStorage

3. 商品数量输入框为非受控组件 #

CartItem中输入框用了defaultValue属性，只会在组件首次挂载时赋值，后续父组件状态更新后输入框的值不会同步变更，修改为受控组件即可：

<input
    id={props.ID}
    type="number"
    max={MAX_QUANTITY}
    min={MIN_QUANTITY}
    value={props.quantity} // 替换defaultValue为value绑定状态
    onChange={props.changeQuant}
/>

内容的提问来源于stack exchange，提问作者G T