我正在學習 React/Redux，除了課程之外，我還嘗試自己做一些事情。所以我正在從我玩的一個名為流亡之路的游戲中復制地圖集，但有一些變化。例如，我試圖“解決”的主要問題是點擊地圖，它會突出顯示地圖已完成，如果你再次點擊它，地圖將不完整。就像 imgs 中的示例：完成的地圖未完成的地圖我的問題是，當我點擊一張地圖時，所有其他地圖都標記為已完成。在圖像上只有 2 張地圖，但有 156 張地圖，顯然我不想單擊地圖 X 并突出顯示所有其他地圖。這是我加載每個地圖的組件：export default props => (    <div className="regions">        <Region region="haewark_hamlet">            <Map                map_title="Bog"                map_name="bog"                white_map={maps.haewark.bog.white}                yellow_map={maps.haewark.bog.yellow}                red_map={maps.haewark.bog.red}                map_tier="3"            />            <Map                map_title="Vaal Pyramid"                map_name="vaal_pyramid"                white_map={maps.haewark.vaal_pyramid.white}                yellow_map={maps.haewark.vaal_pyramid.yellow}                red_map={maps.haewark.vaal_pyramid.red}                map_tier="3"            />        </Region>        <Region region="tirns_end" />        <Region region="glennach_cairns" />        <Region region="new_vastir" />        <Region region="lex_ejoris" />        <Region region="lex_proxima" />        <Region region="valdos_rest" />        <Region region="lira_arthain" />    </div>);這是我的地圖組件：const Map = props => {    const { completed } = props;    const toggleComplete = function () {        completed ? props.mapUncomplete() : props.mapComplete();    };    return (        <div className={`map ${props.map_name}`} id={props.map_name}>            <div className="map-name">{props.map_title}</div>            <img className="map-size" src={base_map} alt="base map" />            <div className="map-tier-color">                <img                    className={`map-size ${props.map_name}-white`}                    src={props.white_map}                    alt={`${props.map_name} white map`}                />            ></div>        </div>    );};