理解React状态的不可变性
在React中，组件的状态更新是基于引用比较的。当你使用useState管理一个数组或对象时，如果你直接修改这个数组或对象（例如，myArray.push(item)或myObject.property = value），并将其传递给setMyArray或setMyObject，React会发现新旧状态的引用是相同的，因此它认为状态没有改变，组件就不会重新渲染。
为了触发重新渲染，我们必须提供一个全新的数组或对象引用给useState的更新函数。这意味着在更新复杂或嵌套的状态结构时，需要对所有被修改的层级进行“复制”。
错误的状态更新方式及其原因
考虑以下场景，我们有一个包含潜水信息的状态，其中每个潜水对象内部又有一个guides数组：
const [dives, setDives] = useState([
{ boat: 'Marcelo', divesite: '', guides: ['Lee', 'Jhon'] },
]);如果尝试通过以下方式删除某个向导：
function deleteGuide(i, guide) {
var tempArray = dives; // 错误：这里只是创建了一个对原始 'dives' 数组的引用
tempArray[dives.indexOf(i)].guides = dives[dives.indexOf(i)].guides.filter(
(e) => e !== guide,
);
setDives(tempArray); // 错误：'tempArray' 和 'dives' 仍然指向同一个内存地址
}这段代码的问题在于var tempArray = dives;并没有创建一个dives数组的副本，它只是让tempArray变量指向了dives变量所指向的同一个数组对象。后续对tempArray的修改实际上就是对原始dives数组的修改。当setDives(tempArray)被调用时，React会比较tempArray和当前的dives状态，发现它们的引用是相同的，因此不会触发组件的重新渲染。
为了验证这一点，可以在setDives之前添加一个console.log：
console.log(tempArray === dives); // 这将始终返回 true setDives(tempArray);
这明确表明tempArray和dives是同一个对象。
正确的状态更新策略：创建新副本
要正确更新嵌套数组并触发UI重新渲染，必须在每次修改时创建新的数组和/或对象副本。这通常通过使用JavaScript的展开运算符（...）来实现。
以下是修正后的deleteGuide函数：
function deleteGuide(diveIndex, guideToDelete) {
// 1. 创建顶层 'dives' 数组的浅拷贝
const updatedDives = dives.map((dive, index) => {
if (index === diveIndex) {
// 2. 如果是目标潜水对象，创建该对象的新副本
// 3. 同时创建 'guides' 数组的新副本，并过滤掉要删除的向导
return {
...dive, // 复制潜水对象的所有其他属性
guides: dive.guides.filter((g) => g !== guideToDelete), // 创建新的 guides 数组
};
}
return dive; // 其他潜水对象保持不变
});
// 4. 使用新的 'updatedDives' 数组更新状态
setDives(updatedDives);
}代码解析：
- dives.map((dive, index) => { ... }): 我们使用map方法遍历dives数组。map方法总是返回一个全新的数组，这解决了顶层数组引用的问题。
- if (index === diveIndex): 我们找到需要修改的特定潜水对象。
- return { ...dive, guides: dive.guides.filter(...) }:
- ...dive: 这是一个浅拷贝操作，它创建了一个新的潜水对象，并将原始dive对象的所有属性复制到新对象中。这是必要的，因为我们不能直接修改dive对象本身。
- guides: dive.guides.filter((g) => g !== guideToDelete): 这里创建了一个全新的guides数组，其中排除了guideToDelete。
- setDives(updatedDives): 最后，将这个完全新的updatedDives数组传递给setDives。由于updatedDives是一个全新的引用，React会检测到状态变化并触发组件重新渲染。
UI 按钮的调整
为了使上述deleteGuide函数能够正确识别要修改的潜水对象，我们需要在UI中传递正确的索引。原始代码中的dives.indexOf(i)在map循环内部可能不准确，因为i是整个dive对象，而indexOf对于对象比较会基于引用，这可能导致意外行为。更可靠的做法是直接传递map提供的索引。
{dives.map((diveItem, diveIndex) => ( // 将 i 重命名为 diveItem，并获取索引 diveIndex
<div key={diveIndex}> {/* 建议为列表项添加 key */}
{diveItem.guides.map((guide, guideIndex) => ( // 遍历当前 diveItem 的 guides
<ButtonGroup key={`${diveIndex}-${guideIndex}`}> {/* 建议为嵌套列表项添加 key */}
<Button>{guide}</Button>
<Button onClick={() => deleteGuide(diveIndex, guide)}>
删除 {guide} {/* 添加按钮文本以便识别 */}
</Button>
</ButtonGroup>
))}
</div>
))}关键改动：
- 在外部map中，我们现在传递diveIndex给deleteGuide函数，而不是整个diveItem对象。这样deleteGuide可以通过索引准确找到要修改的潜水对象。
- 为map生成的列表项添加了key属性，这对于React列表渲染的性能和稳定性至关重要。
总结与最佳实践
- 不可变性是核心： 在React中更新状态（尤其是数组和对象）时，始终牢记不可变性原则。不要直接修改现有状态，而是创建新的副本。
- 使用展开运算符： ...操作符是创建数组和对象浅拷贝的强大工具。
- 深拷贝与浅拷贝： 对于多层嵌套的数据结构，如果需要修改深层数据，可能需要对所有受影响的层级进行浅拷贝，或者考虑使用像immer这样的库来简化深层不可变更新。在本例中，我们通过map和...实现了必要的层级拷贝。
- 传递正确标识符： 在从UI触发状态更新时，确保你传递了足够的信息（如索引或唯一ID）来准确识别需要修改的数据项。
- 利用map进行数组更新： 当需要修改数组中的元素时，map是一个非常适合的工具，因为它总是返回一个新数组。filter也类似，它返回一个新数组。
通过遵循这些原则，你可以确保React状态更新的正确性和UI的响应性。
