如何在 React 中更新状态对象的某个值

在 React 中，我们经常需要更新组件的状态来反映 UI 的变化。如果状态是一个复杂的对象，比如一个包含多个筛选条件的对象，我们希望只更新其中的某个键，而不是整个状态对象。今天，我将向大家展示如何在更新状态时保留已有的数据，只修改需要更改的部分。

问题背景

假设我们有一个 filters 对象，用于存储多个筛选条件，比如用户选择的类别、价格范围、排序方式等。它可能看起来像这样：

const [filters, setFilters] = useState({category: 'all',priceRange: '0-50',sortBy: 'popularity',
});

现在，我们希望用户更改某个筛选条件，比如将 category 更新为 'electronics'。为了做到这一点，我们需要更新 filters 对象中的 category 属性，而其他属性（priceRange 和 sortBy）保持不变。

直接替换的问题

如果我们直接设置新的对象，比如这样：

setFilters({ category: 'electronics' });

这会导致整个 filters 对象被替换，原来的 priceRange 和 sortBy 都会丢失。所以，我们需要一种方法来更新 filters 对象中的某个键，而不影响其他键。

解决方案：使用展开运算符

一个常见且简洁的方法是使用 JavaScript 的展开运算符（...）。展开运算符允许我们复制对象中的所有属性，并根据需要更新其中的某个值。以下是实现方法：

const setFilter = (key, value) => {setFilters(currentFilters => ({...currentFilters,[key]: value,}));
};

上面的代码做了以下几件事情：

1. 使用 setFilters 更新状态，currentFilters 表示当前的 filters 对象。
2. { ...currentFilters, [key]: value } 创建了一个新的对象，复制了 currentFilters 中的所有属性。
3. [key]: value 更新了指定的属性。比如，如果 key 是 'category'，value 是 'electronics'，那么新的对象会变成 { category: 'electronics', priceRange: '0-50', sortBy: 'popularity' }。

为什么要这样做？

这种方式的好处是它保持了状态的不可变性（immutability）。在 React 中，状态应该总是以不可变的方式更新，这意味着每次更新状态时，我们应该创建一个新对象，而不是直接修改已有对象。这种做法有助于避免潜在的错误，并确保 React 能够正确地检测到状态的变化，从而触发重新渲染。

其他更新状态的方法

虽然使用展开运算符是一种常见的做法，但还有其他方法可以实现类似的效果：

Object.assign() 方法

使用 Object.assign() 可以实现相同的功能，它会创建一个新的对象并合并现有对象的属性：

const setFilter = (key, value) => {setFilters(currentFilters =>Object.assign({}, currentFilters, { [key]: value }));
};

 

结论

更新 React 状态对象的某个键值时，关键是保持状态的不可变性，确保在更新过程中保留已有的属性。使用展开运算符是一种简单而高效的方法。当然，还有其他方法可以达到相同的效果，选择哪种方法取决于项目的需求和个人的代码风格。