React手风琴折叠展开后表单状态重置问题求助

问题根源 #

你的手风琴组件通过{isOpen && (...)}的方式条件渲染表单内容，当折叠手风琴（isOpen=false）时，表单组件会被完全卸载；重新展开时，组件会重新挂载，此时表单会回到初始状态——哪怕父组件维护了状态也没用，因为组件实例已经被销毁重建了。

解决方案：用CSS隐藏替代组件卸载 #

核心思路是让表单组件始终存在于DOM中，只是通过CSS控制显示/隐藏，避免组件卸载导致的状态丢失。修改手风琴组件的内容渲染部分：

// 替换原来的条件渲染代码
<div className={`p-3 ${customizableClassProps} border-gray-200 ${isOpen ? '' : 'hidden'}`}>
  {content || children}
</div>

这里用Tailwind的hidden类（对应display: none）来控制显示，组件始终挂载在DOM中，状态自然会被保留。

额外注意事项 #

• 如果你在父组件中传递content时是直接在render里创建元素（比如content={<FormComponent />}），建议用useMemo包裹，避免父组件重渲染时创建新的组件实例：

  const formContent = useMemo(() => (
    <FormComponent formState={formState} setFormState={setFormState} />
  ), [formState, setFormState]);
  
  // 然后传递给手风琴
  <Accordian content={formContent} ... />
  

• 确保表单组件内部正确使用父组件传递的状态，没有在组件内部维护独立的局部状态（除非是临时状态，但最终要同步到父组件）。

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