React-map-gl GeoJSON示例：年份滑块无法更新地图数据问题排查

我仔细看了你的代码，问题核心在于GeoJSON数据的更新逻辑没有让React和react-map-gl正确感知到变化，咱们一步步来修复：

问题根源分析 #

1. 你在_updateSettings里直接修改了原state中的data对象，虽然最后做了浅拷贝{...data}，但这种拷贝只复制了GeoJSON对象的外层，内部的features数组还是原引用——react-map-gl的Source组件依赖数据引用的变化来触发重渲染，所以没检测到内部属性的更新。
2. 另外，直接修改state中的原始数据也不符合React的状态更新规范，可能导致不可预测的渲染行为。

修复方案 #

步骤1：深拷贝GeoJSON数据，确保引用完全更新 #

在更新年份时，先对原数据做深拷贝，再修改拷贝后的新数据，最后更新state。这样整个数据对象的引用都是全新的，React能明确感知到变化：

_updateSettings = (name, value) => {
  console.log(`name:${name}, value:${value}`);
  if (name === "year") {
    this.setState({ year: value });
    const { data } = this.state;
    if (data) {
      // 深拷贝原数据，避免修改state中的原始对象
      const newData = JSON.parse(JSON.stringify(data));
      // 对拷贝后的新数据更新分位数
      updatePercentiles(newData, f => f.properties.income[value]);
      // 更新state，触发重渲染
      this.setState({ data: newData });
    }
  }
};

注：如果你的GeoJSON数据量极大，JSON.parse(JSON.stringify())可能有性能问题，这时可以用lodash.cloneDeep这类专门的深拷贝工具替代。

步骤2：确保updatePercentiles操作的是新数据 #

你的updatePercentiles函数逻辑是对的，但要确保它处理的是深拷贝后的newData，而不是原state中的数据——上面的代码已经做到了这一点，它不会污染原始状态。

额外验证点 #

• 确认ControlPanel的onChange事件正确传递了年份值（你的console.log已经能打印year的新值，这部分没问题）。
• 检查Source组件的data属性确实绑定了this.state.data（你的代码里<Source type="geojson" data={data}>是正确的）。

修改后，当你滑动年份滑块时，newData是完全独立的新对象，React会触发MapGL和Source的重渲染，react-map-gl会重新加载GeoJSON数据，图层就能根据新的percentile值更新颜色和 tooltip 内容了。

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