React-Bootstrap Offcanvas重渲染时内嵌映射Tabs内容消失问题

问题场景 #

开发React应用时，在React-Bootstrap Offcanvas组件中内嵌Tabs组件，Tabs及对应内容通过映射Table组件数组动态生成。Table组件需传入container入参，开发时通过Ref将该参数绑定到动态生成的Tabs节点上。

故障表现 #

• 应用首次渲染时所有功能运行完全正常
• 关闭Offcanvas组件后再次打开，Tab区域内容变为空白
• 控制台打印featureTables状态验证：首次渲染时状态内的container属性可正确指向对应DOM节点；关闭重开Offcanvas后，featureTables的container属性指向的DOM节点已不存在
• 初步定位故障与Ref绑定逻辑相关：重渲染时Container/Ref未被正确更新，曾考虑替换useRef实现绑定，但确认该功能此前版本可正常运行

注：逻辑中用到的FeatureTables来自ESRI ArcGIS Javascript API，本次排查仅涉及Ref传递逻辑，无需掌握该API的额外知识即可定位问题

相关实现代码 #

LayerResults组件代码 #

import React, { useEffect, useRef } from 'react';
import Tabs from "react-bootstrap/Tabs";
import Tab from "react-bootstrap/Tab";

function LayerResults({featureTables, mapView, placeFeatureTables}) {
    const resultRef = useRef(featureTables.map(() => React.createRef()));

    useEffect(()=> {
        if (featureTables.length) {
            placeFeatureTables(resultRef);
        } 
    }, [mapView])

    return (
        <Tabs defaultActiveKey={featureTables[0].layer.title} className="tableResults">
            {featureTables && featureTables.map((table, i) => {
                return (
                    <Tab
                        className="TableTab"
                        title={`${table.layer.title.slice(0,10)}...`}
                        eventKey={table.layer.title}
                        key={`${i}`}
                    >
                        <div ref={resultRef.current[i]}></div>
                    </Tab>
                )
            })}
        </Tabs>
    )
};

上层组件placeFeatureTables函数代码 #

该函数在useEffect中调用，作用是通过传入的container/Ref更新featureTables状态：

const placeFeatureTables = (containerRefs) => {
    setFeatureTables(prev => {
        const placedTables = prev.map((table, i) => {
            table.container = containerRefs.current[i].current;
            return table;
        })
        return placedTables;
    })
}

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