Reactjs 在函数组件中单击时仅更新子级

我正在尝试制作一个谷歌地图应用程序，上面有多边形。我得到了一个函数组件，它可以同时渲染谷歌地图和多边形对象。单击多边形时，我希望更新单击的多边形的颜色，并将所有其他多边形的颜色重置为默认值。我的代码基本上是这样的：

export default function MyDashComponent
  const [mapOptions, setMapOptions] = ...

..

  function click(i){
        setMapOptions({strokeColor: "#212527",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#05628A",
            fillOpacity: 0.35,
            polygonKey: 1});
    }
...
render
  <GoogleMap>
       {list_poly.map(function(object, i){
          
          return(
        <Polygon key={i}  path={object} onClick={(i)=>click(i)} options={mapOptions} 
  </GoogleMap>

导出默认函数MyDashComponent
常量[mapOptions，setMapOptions]=。。。
..
功能点击（一）{
setMapOptions（{strokeColor:#212527“，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：“05628A”，
不透明度：0.35，
polygonKey:1}）；
}
...
提供
{list_poly.map（函数（对象，i）{
返回(
单击（i）}options={mapOptions}

---

如您所见，它只会更新该元素的整个多边形。我该怎么做？

您可以创建一个状态来存储所单击元素的索引。如果当前索引等于该状态下的索引，则可以设置贴图选项

---

您可以查看此演示以供参考：

谢谢，它工作得非常好