React + Mapbox GL：地图组件数组的状态未在地图事件上更新

Question

我正在尝试创建一个地图，用户可以在其中单击地图上的县，并且单击的县将像这样突出显示：

问题

除了一个主要问题之外，我已经能够创建一个工作原型 -- 单击县时设置状态始终基于原始状态，而不是更新后的状态状态。我正在使用县 FIPS id，所以如果我有这样的县列表：

[39049, 39159] 然后我添加 39023，更新的数组将是 [39049, 39159, 39023]。但是，随后的添加（比如 39024）会将更新后的数组更改为 [39049, 39159, 39024] 而不是我所期望的：[39049, 39159, 39023, 39024]

这是一个演示问题的 JSFiddle：

jsfiddle

这是我用来更新县列表的相关代码：

 componentDidMount() {
    const { lng, lat, zoom, counties } = this.state;

     ...

     map.on('click', 'counties', (e) => {
            map.getCanvas().style.cursor = 'pointer';

            // Use the first found feature.
            const feature = e.features[0];

            const {FIPS} = feature.properties;
            
            let updatedCounties;
            
            if(counties.includes(FIPS)) {
                updatedCounties = counties.filter(el => el !== FIPS);
            } else {
                updatedCounties = counties.concat([FIPS]);         
            }
            
            this.setState({
                counties: updatedCounties
            });
            
            map.setFilter('counties-highlighted', [
                'in',
                'FIPS',
            ...updatedCounties
            ]);
        });
  }

更新单个值（如地图中心或缩放）似乎不是问题，因为它是对值的批量覆盖而不是修改数组。

我尝试过的事情

我发现如果我改变原始 counties 值，它会按我预期的那样工作，但我知道这是不好的做法。

Answer 1

我认为您在 javascript 闭包中“锁定”了您的初始状态值，导致它们在您的事件处理程序回调中保持不变，即使在状态发生变化之后也是如此。

您可以像这样尝试从事件处理程序中获取状态：

 componentDidMount() {

     map.on('click', 'counties', (e) => {
          const { lng, lat, zoom, counties } = this.state;

          // use the values that should be current here
            
     });
 }

React + Mapbox GL：地图组件数组的状态未在地图事件上更新

React + Mapbox GL: State of Array of Map Components not updating on Map Event

reactjs

mapbox-gl-js

问题

我尝试过的事情