Question

我正在开发一个React项目，该项目从两个选择框中获取输入，在外部JSON文件中查询值，并使用Mapbox映射结果。我的代码被构造为一个没有Redux的单个文件，因为我需要一个相当快的周转时间，我无法理解如何使用Redux。到目前为止，我已经获得了使用初始状态映射值的程序。但是，当选择框中的值发生更改时，我在更新地图时遇到问题。我班上的代码如下：

class VID extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      //Set initial state. This works.
    };
  }

  componentDidMount(){
    const mapConfig = {
      //map configuration
    };

    mapboxgl.accessToken = 'token';

    const map = new mapboxgl.Map(mapConfig);

    //Loop through dataset. Find records meeting a criteria. Push to array. 
    //This works fine.
    var arr = [];

    Object.keys(Data).forEach(function(key) {
      if (//filtering criteria are met) {
        arr.push(Data[key]);
      };
    });

    //Define layers for each matching record. 
    Object.keys(arr).forEach(function(key) {
      map.on('load', function() {
        map.addLayer({
          "id": key,
          "type": "circle",
          "source": {
            "type": "geojson",
            "data": {
              "type": "Feature",
              "geometry": {
                "type": "Point",
                "coordinates": [arr[key].LONG, arr[key].LAT]
              },
            }
          },
          "paint": {
            'circle-radius': //formula to set radius based on count,
            'circle-color': '#000000'
          }
        });
      })
    })
  }

  //SOMEWHERE INSIDE THIS HANDLECHANGE BLOCK LIES MY PROBLEM
  handleChange(e) {
    this.setState({
      //Set state based on values of select boxes. This works.
    },
    function(){
      //Same as before. Create an array of matching records.
      var arr = [];

      Object.keys(Data).forEach(function(key) {
        if (//new filtering criteria are met) {
          arr.push(Data[key]);
        };
      });

      Object.keys(arr).forEach(function(key) {
        map.setPaintProperty(key, 'circle-radius', //formula)
      });
    })
  }

  render() {
    return (
      //All of my JSX
    )
  }

当我运行上面的代码时，我在Web控制台中收到以下错误：TypeError：map.setPaintProperty不是函数。我的网页也崩溃了（从显示我的用户界面变为空白页）。

我尝试过其他一些补救措施：
*使用this.map.setPaintProperty（TypeError：这是未定义的）
*尝试其他生命周期方法，如componentWillReceiveProps和shouldComponentUpdate（当我在选择框中更改选项时，代码不会执行 - 通过console.log确认）
*在类中定义映射但在生命周期方法之外（模块构建失败：SyntaxError：意外的令牌）
*在类之外定义地图（错误：未找到容器'地图'。）

我如何构建代码以便我可以更新圆圈尺寸？

如果有帮助，我正在使用mapbox-gl 0.44.0

运行反应16.2.0

Answer 1

我发现了我的问题。这个答案是为后人写的。

问题与范围有关。我将地图定义为常量（const map = ...），它将变量设置为局部范围。相反，定义没有常量标记的地图（map = ...）。这允许在生命周期模块中访问映射变量。

有趣的是，最小的事情会导致最大的问题。

如何在React状态更改时更新Mapbox圈子属性？

1 个答案: