调用setActiveTags时TagsModal父组件未更新的技术求助

问题根源 #

你直接修改了activeTags状态对象的属性，然后把原对象传给setActiveTags。React的状态更新依赖于值的引用变化，由于前后是同一个对象引用，React无法检测到状态发生改变，因此不会触发组件更新。

解决方法 #

• 方法一：创建新对象后更新
  通过展开运算符复制原状态对象，修改新对象的属性后再传入setActiveTags，生成新的对象引用让React检测到状态变化：

onPress={() => {
  const newActiveTags = { ...activeTags };
  newActiveTags[tag] = !newActiveTags[tag];
  setActiveTags(newActiveTags);
}}

• 方法二：使用函数式更新
  如果状态更新依赖前一次的状态值，推荐用函数式更新。这种方式会接收最新的前状态作为参数，确保每次更新都基于最新值，同时生成新对象：

onPress={() => {
  setActiveTags(prevActiveTags => ({
    ...prevActiveTags,
    [tag]: !prevActiveTags[tag]
  }));
}}

额外提示 #

避免直接修改React状态对象（包括对象和数组），这属于可变操作，会破坏React的状态更新机制，导致组件无法正常响应状态变化。始终通过创建新的引用对象来更新状态。

内容的提问来源于stack exchange，提问作者Kim Mỹ