Javascript Mapbox JS-在父状态更新时以编程方式更新映射 盖茨比项目-当具有所需路线的状态更新时，尝试高亮显示地图盒路线。 目前的执行情况： 负荷图 使用updateList函数更新父列表状态 父级将更新后的列表转发给其他组件以显示路由列表 其中一个列表项被悬停 activeItem状态得到更新 activeItem使弹出窗口出现在当前地图上>>>>不工作

由于mapbox映射似乎只在useffect钩子中正确加载，因此我看不到任何其他方法根据父级的activeItem显示弹出窗口。如果有其他选择，请让我知道

我尝试过的方法：

• 从useEffect挂钩中提取映射并在普通常量中实例化它->“错误：无效类型：'container'必须是字符串或HtmleElement。”
• 使用useState钩子->映射为映射创建状态对于所有与映射相关的函数来说都是未定义的，例如map.on（“加载”，…）

当前代码：

constembeddedmap=（{updateList，activeItem}）=>{
常量mapContainerRef=useRef（空）
const[list，setList]=useState（[]
useffect（（）=>{
常量映射=新的mapboxgl.map({
容器：mapContainerRef.current，
accessToken:process.env.GATSBY\u MAPBOX\u标记，
样式：“mapbox://styles/mapbox/...",
中间：[-90.836,51.134]，
缩放：6，
})
const popup=new mapboxgl.popup（）
常量getUniqueFeatures=（数组，comparatorProperty）=>
数组过滤器(
（v，i，a）=>
a、 findIndex(
t=>
t、 属性[比较属性]===
v、 属性[比较属性]
)==i
)
const updateMap=map=>{
const features=map.queryRenderedFeatures（{layers:[“data”]}）
如果（功能）{
const uniqueFeatures=getUniqueFeatures（features，“post_id”）
设置列表（唯一功能）
}
}
map.on（“加载”，（）=>{
更新地图（地图）
map.on（“movestart”，（）=>{
setFilter（“data”、[“has”、“title”]）
})
map.on（“moveend”，（）=>{
更新地图（地图）
})
map.on（“mousemove”，“data”，e=>{
map.getCanvas（）.style.cursor=“指针”
常量特征=e.特征[0]
设置弹出窗口（地图、弹出窗口、功能）
})
map.on（“mouseleave”，“data”，（）=>{
map.getCanvas（）.style.cursor=“”
})
在“点击”、“数据”上，e=>{
常量特征=e.特征[0]
飞行地图({
中心：特征.几何.坐标[0]，
})
设置弹出窗口（地图、弹出窗口、功能）
})
})
return（）=>map.remove（）
}, [])
返回(
)
}

将我的方法更改为ref解决了问题：

const map = useRef(null)
map.current = new mapboxgl.Map({
      container: mapContainerRef.current,
      accessToken: process.env.GATSBY_MAPBOX_TOKEN,
      style: "mapbox://styles/data",
      center: [-114.836, 51.134],
      zoom: 6,
    })

然后，我可以使用以下示例轻松重用地图：

map.current.flyTo({
      center: activeItem.startPoint,
    })

map.current.flyTo({
      center: activeItem.startPoint,
    })