React简单state场景下按钮需点击两次才能正常打开模态框问题求助

问题根因 #

你把Buttons和SidebarList组件直接定义在了Sidebar组件的内部，这是导致问题的核心原因。
每次Sidebar的state（比如deleteHovered、expanded）发生变化时，Sidebar会重新渲染，此时会重新创建Buttons、SidebarList的函数定义，对于React来说这就是全新的组件类型，会直接卸载旧的组件实例，挂载全新的实例。
这就刚好对应你观察到的所有现象：

• 点击垃圾桶按钮时，先触发state更新把modalIsOpen设为true，同时按钮的鼠标事件还会触发父组件的setDeleteHovered修改父组件state，父组件重渲染后重建Buttons实例，新实例的modalIsOpen默认是false，所以模态框不会弹出
• 第二次点击时，deleteHovered已经是对应状态，不会触发父组件state变更，Buttons不会被重建，modalIsOpen正常设置为true，模态框弹出
• 日志里A总是最后输出，就是因为父组件重渲染后才会初始化新的Buttons实例，执行组件内的console.log('A')

解决方案 #

把Buttons组件、SidebarList组件、ButtonsProps接口的定义全部移到Sidebar组件的外部，组件依赖的变量（比如currentPage、fetchPage、setDeleteHovered等）全部通过props透传即可，不要在组件内部嵌套定义其他组件。

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