如何在 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,
}));
};
上面的代码做了以下几件事情：
- 使用
setFilters更新状态，currentFilters表示当前的filters对象。 { ...currentFilters, [key]: value }创建了一个新的对象，复制了currentFilters中的所有属性。[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 状态对象的某个键值时，关键是保持状态的不可变性，确保在更新过程中保留已有的属性。使用展开运算符是一种简单而高效的方法。当然，还有其他方法可以达到相同的效果，选择哪种方法取决于项目的需求和个人的代码风格。