作为Leaflet地图子组件的Dropdown选择后状态未更新问题

问题根本原因 #

状态不更新是react-leaflet的Control组件的原生渲染机制导致的：

• Leaflet 控件完全独立于React虚拟DOM树运行，Control组件仅会在首次挂载时把内部元素渲染到Leaflet创建的DOM节点上，后续React状态更新默认不会触发控件内部内容的重渲染
• 你写的Select的onChange逻辑本身没有问题，状态实际已经更新，只是Control包裹的内容没有跟着刷新

可用解决方法 #

方法1：给Control组件添加绑定状态的key属性

状态变化时会强制重渲染整个Control组件，是成本最低的解决方案，修改后代码如下：

<MapContainer>
  <Control position="topleft" key={sel?.value}>
    <div style={{ width: "300px" }}>
      <Select
        value={sel}
        options={[
          { label: "a", value: 1 },
          { label: "b", value: 2 }
        ]}
        onChange={(sel) => this.setState({ sel })}
      />
    </div>
  </Control>
  <Control position="topright" key={sel?.value}>
    <>
      <h3>Selection:</h3>
      {`${sel.label}:${sel.value}`}
    </>
  </Control>
</MapContainer>

小提示：你贴出的代码末尾</MapContainer缺少闭合的>，实际运行前请先补上这个语法错误

方法2：使用支持响应式更新的第三方封装Control组件

社区有很多专门封装的Control组件，内部已经处理了React状态和Leaflet控件的同步逻辑，不需要额外配置即可正常跟着状态更新。

方法3：使用React Portal自定义挂载

把Control里的内容抽成单独组件，手动通过React Portal挂载到Leaflet生成的Control DOM节点上，适合自定义程度较高的复杂场景。

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