React中两种Context状态修改方式，第一种是否属于直接修改？

第一种写法存在错误，属于直接修改状态：

const {
    flavor, setFlavor,
    cart, setCart
} = useContext(DataContext);

function addProductToCart(pizza) {
    setCart(cart + 1);
    flavor.push(pizza); // 直接修改原状态数组
    setFlavor(flavor.filter(item => item));
}

flavor是从Context中获取的状态数组，flavor.push(pizza)直接篡改了原状态对象，违反了React状态不可直接修改的核心原则。React依赖状态的引用变化触发组件重渲染，直接修改原状态会让React无法准确识别更新，可能导致组件不渲染、状态数据不一致等问题——哪怕后续调用了setFlavor，原状态已经被破坏，这是错误的写法。

第二种写法是正确的：

const {
    flavor, setFlavor,
    cart, setCart
} = useContext(DataContext);

function addProductToCart(pizza) {
    const copyFlavor = [...flavor]; // 创建原数组的独立副本

    setCart(cart + 1);
    copyFlavor.push(pizza); // 仅修改副本，不触碰原状态
    setFlavor(copyFlavor.filter(item => item));
}

这里通过扩展运算符[...flavor]生成原状态数组的全新副本，所有修改操作都在副本上进行，最后通过setFlavor传入新数组的引用。这种写法遵循了React的不可变状态更新规则，React能通过引用变化正确识别状态更新，触发对应组件渲染，保证状态数据的一致性。

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