React调用数据库数据后循环内bulmaCollapsible折叠功能失效如何解决

问题根源 #

bulmaCollapsible 是原生JS实现的组件，需要主动调用attach方法为页面上已存在的.is-collapsible元素绑定折叠交互事件。你当前的代码只在组件首次挂载完成后执行了一次attach：

• 静态赋值场景下，trainingData初始化就有值，首次渲染时所有折叠卡片DOM已经生成，attach能正常找到元素绑定事件，所以功能正常
• 接口请求是异步操作，首次挂载执行attach时trainingData为空，没有对应的折叠卡片DOM，事件没有绑定成功；等接口返回数据更新trainingData、重新渲染出卡片后，没有再次执行attach绑定事件，因此折叠功能失效

修复步骤 #

1. 调整bulmaCollapsible初始化的useEffect依赖 #

将trainingData加入useEffect的依赖数组，保证每次trainingData更新、卡片重新渲染后，都会重新执行事件绑定：

useEffect(() => {
    // 没有数据或容器未挂载时无需执行绑定
    if (trainingData.length === 0 || !collapsiblesRef.current) return
    bulmaCollapsible.attach(".is-collapsible", {
        container: collapsiblesRef.current
    });
}, [trainingData])

2. 优化列表渲染的key值（可选但推荐） #

不要用数组索引作为map的key，改用数据里唯一的trainingsid，避免数组顺序变化导致的DOM复用异常：

{trainingData.map((d, i) => (
    <div className="card" key={d.trainingsid}>
        {/* 剩余原有内容不变 */}
    </div>
))}

内容的提问来源于stack exchange，提问作者Mr. Hankey