React状态已更新但应用未刷新问题求助

问题原因 #

React通过状态引用的变化判断是否触发组件重渲染。你的代码中：

let newFamille = famille;
newFamille.membre1.age += 1;

只是把原famille对象的引用赋值给了newFamille，修改newFamille的属性本质是直接修改原对象。调用setMembres(newFamille)时，前后状态的引用完全相同，React会判定状态未变化，因此不会触发重渲染，界面自然不更新。

解决方法 #

必须创建全新的对象副本，在副本上修改属性后再传给setMembres，确保状态引用发生变化。以下是两种可行的修改方式：

方式1：手动创建新对象（适合固定结构的对象） #

function handleAgeChange(){
  const newFamille = {
    ...famille, // 拷贝外层对象
    membre1: {...famille.membre1, age: famille.membre1.age + 1}, // 拷贝成员并更新年龄
    membre2: {...famille.membre2, age: famille.membre2.age + 1},
    membre3: {...famille.membre3, age: famille.membre3.age + 1}
  };
  setMembres(newFamille);
}

方式2：遍历成员动态生成新对象（适合结构不固定的对象） #

function handleAgeChange(){
  const newFamille = Object.fromEntries(
    Object.entries(famille).map(([key, membre]) => [
      key,
      {...membre, age: membre.age + 1} // 为每个成员创建新副本并更新年龄
    ])
  );
  setMembres(newFamille);
}

额外提示 #

setMembres是异步操作，直接在调用后console.log(membres)会打印旧状态。如果要查看更新后的状态，可以用useEffect监听membres变化：

useEffect(() => {
  console.log(membres);
}, [membres]);

内容的提问来源于stack exchange，提问作者Wawan4137