问React检测到了ForwardRef(ContainerComponent)调用的钩子顺序的变化。

EN

React has detected a change in the order of Hooks called by ForwardRef(ContainerComponent)

const Map = ({ openModal }) => {

    const [homeCoords, setHomeCoords] = useState([49.2, -123]);
    const [bounds, setBounds] = useState({
        lat_lower: 48.9,
        lat_upper: 49.5,
        lon_left: -123.8,
        lon_right: -122.2
    });


    // Get the user's location with navigator.geolocation
    useEffect(() => {
        if(!window.navigator.geolocation) {
            return;
        }

        window.navigator.geolocation.getCurrentPosition(
            // success
            (res) => {
                setHomeCoords([res.coords.latitude, res.coords.longitude]);
            },

            // failure
            () => {
                console.error('Must allow pestlocations.com to access your location to use this feature.')
            }
        )
    }, []);


    // Helper function for BoundTracker component 
    const collectBounds = (e) => {
        const bounds = e.target.getBounds();
                
        const currLatLower = bounds._southWest.lat;
        const currLatUpper = bounds._northEast.lat;
        const currLonLeft = bounds._southWest.lng;
        const currLonRight = bounds._northEast.lng;

        setBounds({
            lat_lower: currLatLower,
            lat_upper: currLatUpper,
            lon_left: currLonLeft,
            lon_right: currLonRight
        })
    }


    // Listen for dragging or zooming on map and update bounds
    const BoundTracker = () => {
        useMapEvents({
            
            // Drag map
            dragend: (e) => {
                collectBounds(e);
            },

            // Zoom map
            zoomend: (e) => {
                collectBounds(e);
            }
        })
    }

    const HomeButton = () => {

        const map = useMap();

        return (
            <div className="btn home" aria-disabled="false" onClick={() => {
                map.panTo(homeCoords);

                const bounds = map.getBounds();
                setBounds({
                    lat_lower: bounds._southWest.lat,
                    lat_upper: bounds._northEast.lat,
                    lon_left: bounds._southWest.lng,
                    lon_right: bounds._northEast.lng
                })
            }}>
                <AiFillHome />
            </div>
        )
    }

    return (
        <>
            <MapContainer className="Map" position={homeCoords} zoom={10}>
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                
                <HomeButton />
                <div className="btn info" onClick={() => openModal("Welcome")}><AiOutlineInfoCircle /></div>
                <div className="btn legend" onClick={() => openModal("Legend")}><BsMap /></div>
                <div className="search-btn" onClick={() => return}>Search This Area</div>
                
                <PointClusters />
                <BoundTracker />
            </MapContainer>
        </>
    )
}

import { useState } from 'react';
import MarkerClusterGroup from 'react-leaflet-cluster';
import { Marker, Popup } from 'react-leaflet';
import L from 'leaflet';
import './PointClusters.css';


// For testing purposes only - - - - - - - - - - - - - - - - - -
const testPoints = require('../../../testPoints.json').features;
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -



const PointClusters = () => {

    // Initialize points as testpoints. ** CHANGE FOR PRODUCTION **
    const [points, setPoints] = useState(testPoints);

    const newicon = new L.divIcon({
        className: "custom-marker",
        html: "<span class='arrow'></span>"
    });

    const createClusterCustomIcon = function (cluster) {
        return L.divIcon({
          html: `<span>${cluster.getChildCount()}</span>`,
          className: 'custom-marker-cluster',
          iconSize: L.point(33, 33, true),
        })
      }

    return (
        <MarkerClusterGroup
            iconCreateFunction={createClusterCustomIcon}
        >
            {
                points.map((point, i) => {

                    const { name, address, type, numOfReports, url } = point.properties;

                    const coords = [point.geometry.coordinates[1], point.geometry.coordinates[0]];

                    return (
                        <Marker position={coords} icon={newicon} key={i}>
                            <Popup>
                                {
                                    name === "None" ? null : 
                                    
                                    <>
                                        <b>{name}</b>
                                        <br />
                                    </>
                                }
                                <strong>Address</strong>: {address}
                                <br />
                                <strong>Type</strong>: {type}
                                <hr />
                                At least <a href={url}>{numOfReports} reports</a> on bedbugregistry.com
                            </Popup>
                        </Marker>
                    )
                })
            }
        </MarkerClusterGroup>
    )
}