reactjs - 使用状态钩子触发一系列事件

Question

当点击不同的按钮时，这部分假设在地图上显示不同的标记。我想添加一个钩子来触发这些重新渲染。动作发生在<a>and{alertIcon}中。当我单击 时，我想alertIcon更改为不同的标记集<a>，它具有onClick使用该setAlertIcon功能的

const Map = ({ eventData, center, zoom }) => {
    const [locationInfo, setLocationInfo] = useState(null);
    const [infoBox, setInfoBox] = useState(true);
    const [alertIcon, setAlertIcon] = useState(); 

    function marker(idx) {return eventData.map((ev, index) => {
        if(ev.categories[0].id === idx) {
            console.log(idx);
            return <LocationMarker key = {index} lat={ev.geometries[0].coordinates[1]} lng={ev.geometries[0].coordinates[0]} onClick={() => {
                setLocationInfo({ id: ev.id, title: ev.title });
                setInfoBox(!infoBox);
            }} />
        }
        return null
    })}
    
   

    return (
        <div>
            <div id="mySidenav" className="sidenav">

                //click here and trigger event, pass parameter to function
                <a href="#" id="Fire" onClick = {() => {
                    setAlertIcon(()=>marker(10));
                }}>Fire</a>
                <a href="#" id="Storm">Storm</a>
            </div> 
 
            <Header/>
            {/*reload this component*/}
            <div className="map">
                <GoogleMapReact
                    bootstrapURLKeys={{ key: process.env.REACT_APP_API_KEY }}
                    defaultCenter={ center }
                    defaultZoom={ zoom }
                >
                    {alertIcon} //here is the proble
                                // supposed to make markers rerender upon onClick events
                </GoogleMapReact>
 
                {infoBox && 
                    <div  onClick={()=> setInfoBox(!infoBox)}>
                        {locationInfo && <LocationInfoBox info={locationInfo}/>}
                    </div>
                }
            </div>
        </div>
    )
}

标签： reactjs

Answer 1

您可以将 idx 更改为 state 并将 alertIcon 替换为 marker()

像这样

const Map = ({ eventData, center, zoom }) => {
    const [locationInfo, setLocationInfo] = useState(null);
    const [infoBox, setInfoBox] = useState(true);
    const [idx, setIdx] = useState(); 

    function marker() {
      return eventData.map((ev, index) => {
        if(ev.categories[0].id === idx) {
            console.log(idx);
            return <LocationMarker key = {index} lat={ev.geometries[0].coordinates[1]} lng={ev.geometries[0].coordinates[0]} onClick={() => {
                setLocationInfo({ id: ev.id, title: ev.title });
                setInfoBox(!infoBox);
            }} />
        }
        return null
    })}
    
   

    return (
        <div>
            <div id="mySidenav" className="sidenav">

                //click here and trigger event, pass parameter to function
                <a href="#" id="Fire" onClick = {() => setIdx(10)}>Fire</a>
                <a href="#" id="Storm">Storm</a>
            </div> 
 
            <Header/>
            {/*reload this component*/}
            <div className="map">
                <GoogleMapReact
                    bootstrapURLKeys={{ key: process.env.REACT_APP_API_KEY }}
                    defaultCenter={ center }
                    defaultZoom={ zoom }
                >
                    {marker()}
                </GoogleMapReact>
 
                {infoBox && 
                    <div  onClick={()=> setInfoBox(!infoBox)}>
                        {locationInfo && <LocationInfoBox info={locationInfo}/>}
                    </div>
                }
            </div>
        </div>
    )
}