React更新状态时另一状态被重置：点击输入按钮最大化卡片自动最小化

• maximizeCard状态声明在MainSelectionButtons组件内部，父组件App的hours状态更新时，会触发所有子组件的重渲染流程
• 若未对MainSelectionButtons做重渲染优化，或该组件绑定了和hours关联的动态key值，hours更新时会导致MainSelectionButtons组件销毁重建，内部useState会被重置为初始的未最大化状态，触发卡片自动最小化

快速临时修复：状态提升 #

将maximizeCard状态从MainSelectionButtons内部提升到父组件App中维护，通过props向子组件传递状态值和修改状态的回调，父组件hours更新不会导致该状态被重置。

推荐方案：Context全局状态管理 #

将全局共享的cryptoData、hours、卡片最大化状态统一放到Context中管理，需要用到这些状态的组件直接从Context取值，既可以避免props透传带来的冗余代码，也能解决层级传递导致的重渲染状态丢失问题，是同类问题的最优解。

轻量优化方案：避免不必要重渲染 #

如果不想改动状态存放位置，可以做如下优化：

• 用React.memo包裹MainSelectionButtons组件
• 所有传递给MainSelectionButtons的回调函数用useCallback包裹，确保引用稳定
• 所有传递给该组件的派生数据用useMemo包裹，避免不必要的更新触发
• 移除MainSelectionButtons上和hours相关的动态key配置

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