组件在状态更改时重新渲染

Question

My component with a simple MapBox gets re-rendered wierdly on every state change that has nothing to do with the component? Any idea how to prevent this?

It does not happen if I do not add the data prop to the second argument of useEffect , but I need this to re-render on an actual data change..

The map component:

const getMap = () => {
    return new mapboxgl.Map({
        container: 'mapContainer',
        style: 'mapbox://styles/mapbox/light-v9',
        center: [7.32, 60.44],
        zoom: 6,
    })
};
const Map = (props) => {
  const { data } = props
  if (data['features'] != null) {
        useEffect(() => {
            const map = getMap();

            map.on('load', function () {

                map.addSource('malls', {
                    type: "geojson",
                    data: data,
                    cluster: true,
                    clusterMaxZoom: 14, 
                    clusterRadius: 50 
                });

            });
        }, [data]); //

  }
  return (
        <div style={style} id="mapContainer" />
  );
}

Answer 1

Hooks should always be called outside conditionals, as mentioned in the Rules of Hooks . You can move your hook to the top-level and move the conditional inside the hook.

const Map = (props) => {
  const { data } = props
  useEffect(() => {
    if (data['features'] != null) {
      const map = getMap();
      map.on('load', function () {
        map.addSource('malls', {
          type: "geojson",
          data: data,
          cluster: true,
          clusterMaxZoom: 14, 
          clusterRadius: 50 
        });
      });
    }
  }, [data]);

  return (
    <div style={style} id="mapContainer" />
  );
}

Answer 2

与其将其编写为函数，不如使用一个类并实现shouldComponentUpdate函数。