React组件在对象内嵌套数组新增元素后未重新渲染如何解决？

问题根因 #

React 中的 useState 是通过浅比较引用地址判断是否需要触发组件重渲染。你当前的代码属于原地修改已有的 state 对象：直接给原 group 的 members.regular 赋值，传入 setGroup 的还是同一个内存地址的 group 对象，React 会判定 state 没有发生变化，因此跳过重渲染，这和 state 是否是嵌套结构没有直接关系。

解决方案 #

不需要强制拆分独立 useState，有两种常用方案可选：

方案1：完整拷贝生成全新 state 对象（推荐） #

更新时逐层拷贝所有嵌套层级，生成全新引用的对象传入 setGroup 即可，建议使用 setter 的函数式更新写法避免闭包陷阱：

function useGroup({ initialGroup: GroupType }: Props) {
    const [group, setGroup] = useState<GroupType>(initialGroup)

    const addMember = (member) => {
       setGroup(prevGroup => {
         // 逐层拷贝生成新对象
         return {
           ...prevGroup,
           members: {
             ...prevGroup.members,
             regular: [...prevGroup.members.regular, member]
           }
         }
       })
    }

    return {
       group,
       addMember
    }
}

方案2：拆分独立 useState #

如果嵌套层级较多、拷贝逻辑繁琐，也可以把关联度低的字段拆分为独立的 state 变量：

type MemberType = {id: number, name: string}
function useGroup({ initialGroup: GroupType }: Props) {
    const [groupName, setGroupName] = useState(initialGroup.groupname)
    const [regularMembers, setRegularMembers] = useState<MemberType[]>(initialGroup.members.regular)
    const [premiumMembers, setPremiumMembers] = useState<MemberType[]>(initialGroup.members.premium)

    const addMember = (member) => {
       setRegularMembers(prev => [...prev, member])
    }

    return {
       group: {
         groupName,
         members: {
           regular: regularMembers,
           premium: premiumMembers
         }
       },
       addMember
    }
}

注意事项 #

所有 useState 定义的引用类型（对象、数组）state，都禁止直接原地修改属性，必须通过 setter 传入全新引用的新值，才能保证触发正常的重渲染逻辑。

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