React修改对象类型state后关联组件未重新渲染问题求助

你的猜测完全正确，该问题的核心是直接修改了引用类型的state，未变更对象引用导致React无法检测到状态更新：

• React的状态更新采用浅比较逻辑：对于对象、数组这类引用类型的state，React仅会对比传入setState的新值与旧值的内存引用地址是否一致，若引用未发生变化，React会判定状态无更新，跳过组件重渲染流程。
• 代码中let newDisplays = displays仅将原state对象的引用赋值给新变量，没有创建全新的对象，后续修改newDisplays[name]本质是直接修改原state的属性，最终传入setDisplays的还是和原state引用完全相同的对象，因此不会触发重渲染。
• 控制台能打印出更新后的值，是因为你直接修改了原对象的属性，控制台输出的对象引用指向已经被修改的内存空间，和React是否触发重渲染无关，这种直接修改state的行为也是React官方明确禁止的错误写法，会引发大量不可预期的状态同步问题。

你只需要在更新状态时创建一个全新的对象，变更引用地址即可，推荐使用对象扩展运算符实现浅拷贝：

let initialDisplay = {"javascript": true,"typescript": false}
const [displays, setDisplays] = useState(initialDisplay);
    
const setDisplay = (name:language|tool, show:boolean) => {
    // 扩展运算符创建全新对象，保留原有属性的同时更新对应字段
    const newDisplays = {...displays, [name]: show};
    setDisplays(newDisplays);
}

修改后React会检测到state引用发生变化，触发组件重渲染，TechDropdown组件拿到的open prop会同步更新，下拉弹窗即可正常响应鼠标事件展示/隐藏。

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