如果我使用扩展运算符,为什么状态会发生变化?

正如@Carcigenicate所提到的,您已经创建了一个数组的浅拷贝,这意味着您有一个指向原始数组中相同对象的新数组。

为了避免对原始对象进行变异,还需要创建一个要变异的对象的副本,例如:

// Shallow copy of the array
const products = [...this.state.products];

// Shallow copy of the object within the array
const updatedProduct = { ...products[index] };

// Update the copy of the object
updatedProduct.votes = dir ? updatedProduct.votes + 1 : updatedProduct.votes - 1;

// Replace the object with the updated copy
products[index] = updatedProduct;

Object 通过引用传递的。所以即使你的局部变量 products this.state.products ,它们都包含对相同的引用 对象

要实现您正在尝试的操作,您必须在中克隆对象 本州产品 Object.assign 把你的 const products = [...this.state.products] 有:

const products = [
    Object.assign({}, this.state.products.Orange),
    Object.assign({}, this.state.products.Apples),
    Object.assign({}, this.state.products.Bananas)
]