React中状态变更后如何触发重渲染？状态已变却未重渲染

嘿，我太懂你碰到的这个问题了——这其实是React状态管理里一个非常常见的小坑！

问题根源 #

你直接修改了flag这个state对象的属性（flag[id] = !flag[id]），然后把同一个对象引用传给了setFlag。React判断状态是否需要更新的依据是state的引用是否发生变化，因为你没有创建新的对象，React会认为状态压根没改，自然就不会触发组件重渲染了，哪怕控制台里看起来对象属性已经变了。

而且这里还要提一句：直接修改React的state对象是违反React的不可变性原则的，这种操作会让状态和UI失去同步，还可能埋下很多难以排查的bug哦。

正确的解决方法 #

这里给你两种靠谱的实现方式：

方法1：创建新对象更新状态

通过展开运算符（...）复制原state的所有属性，创建一个全新的对象，再修改目标属性，最后把新对象传给setFlag：

import React from 'react'
export default function App(){
  const[flag,setFlag] =React.useState({1:false,2:false})
  const change=(id)=>{
    // 创建新对象，复制原flag的所有属性
    const newFlag = { ...flag };
    // 修改新对象的目标属性
    newFlag[id] = !newFlag[id];
    // 传入新对象更新状态
    setFlag(newFlag);
    console.log(newFlag);
  }
  return(
    <div>
      {flag[1] ? <p>this is true</p> : <p>this is false</p>}
      <button onClick={()=>change(1)}>Change</button>
    </div>
  )
}

方法2：使用函数式更新（更推荐）

当你的新状态依赖于旧状态时，使用函数式更新会更可靠，它能确保你拿到的是最新的state值，避免因为状态更新的异步性导致的问题：

import React from 'react'
export default function App(){
  const[flag,setFlag] =React.useState({1:false,2:false})
  const change=(id)=>{
    // 函数式更新，prevFlag是最新的旧状态
    setFlag(prevFlag => {
      return { ...prevFlag, [id]: !prevFlag[id] };
    });
  }
  return(
    <div>
      {flag[1] ? <p>this is true</p> : <p>this is false</p>}
      <button onClick={()=>change(1)}>Change</button>
    </div>
  )
}

这两种方式的核心都是创建一个新的对象引用，让React能检测到状态的变化，从而触发组件的重渲染，同步更新UI。

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