React使用useEffect触发react-hooks/exhaustive-deps缺失依赖警告如何解决？

这个警告是React官方的hooks穷尽依赖校验规则触发的，你在useEffect内部使用了4个props参数，但是没有将它们加入依赖数组，React无法保证你能拿到最新的参数值，因此抛出警告：

React Hook useEffect has missing dependencies: 'props.maxEast','props.maxNorth', 'props.maxSouth', and 'props.maxWest'. Either include them or remove the dependency array react-hooks/exhaustive-deps

下面是可行的解决方式：

方案1：补全依赖（推荐） #

如果这四个边界坐标参数变化时，你也需要同步更新地图上的边界框，直接将参数补入依赖数组即可。注意需要调整原有逻辑，避免重复添加相同id的source和layer导致报错：

useEffect(() => {
  if (!map.current) return; // wait for map to initialize

  // Check if Mapbox GL styles have loaded
  var check = checkIfMapboxStyleIsLoaded(map.current);
  if(check) {
    console.log("A load event occurred!");
    // 先清除已存在的边界框图层和数据源，避免重复添加报错
    if (map.current.getLayer('newroute')) {
      map.current.removeLayer('newroute');
      map.current.removeSource('newroute');
    }
    if(props.show) {
      map.current.addSource('newroute', {
        'type': 'geojson',
        'data': {
        'type': 'Feature',
        'properties': {},
        'geometry': {
        'type': 'LineString',
        'coordinates': 
          [
            [props.maxEast, props.maxNorth],
            [props.maxEast, props.maxSouth],
            [props.maxWest, props.maxSouth],
            [props.maxWest, props.maxNorth],
            [props.maxEast, props.maxNorth]
          ]
        }
      }
      });
        
      // Draws bounding box
      map.current.addLayer({
        'id': 'newroute',
        'type': 'line',
        'source': 'newroute',
        'layout': {
        'line-join': 'round',
        'line-cap': 'round'
        },
        'paint': {
        'line-color': '#ff0000',
        'line-width': 5
        }
      }); 
    }
  }
}, [props.show, props.maxEast, props.maxNorth, props.maxSouth, props.maxWest]);

方案2：忽略校验（仅确认参数不会变化时使用） #

如果你100%确定这四个坐标参数在组件生命周期内不会发生变化，或者参数变化时不需要更新边界框，可以直接加注释关闭当前行的eslint校验：

useEffect(() => {
  // 原有逻辑保持不变
}, [props.show]); // eslint-disable-next-line react-hooks/exhaustive-deps

使用该方案时建议额外添加注释说明忽略校验的原因，方便后续代码维护。

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