反应不返回多个组件

Question

我正在使用谷歌地图 api 来显示谷歌 map 上的标记列表以及信息 window。此代码正确地遍历所有位置坐标并为每个纬度和经度放置标记。 对于每个标记，我想显示一个单独的信息窗口应该出现，但是下面的代码给出了一些不匹配的括号的错误。

这是代码；

return (
    <div>
      <Fragment>
      <GoogleMap
        // options = {options}
        id="circle-example"
        zoom={12}
        center={{ lat: parseFloat(latitude), lng: parseFloat(longitude) }}
        mapContainerClassName="map-container"
      >
        <Circle center={center} radius={10} options={options} />

        {markers && markers.map(({ email, latitude, longitude }) => (   
        
        <Marker
         key = {email}
          position={{ lat: parseFloat(latitude), lng: parseFloat(longitude) }}
          onClick={() => {
            setSelected({
              lat: parseFloat(latitude),
              lng: parseFloat(longitude),
            });
            console.log(selected);
          }}
          icon={{
            url: "/personicon.png",
            scaledSize: new window.google.maps.Size(25, 25),
          }}
        />
               **// ))}   error gets removed when I place the brackets here.**      
        
        {selected && (
          <InfoWindow
            //    position={{lat: selected.lat, lng:selected.lng}}
            position={{ lat: parseFloat(latitude), lng: parseFloat(longitude) }}
            onCloseClick={() => {
              console.log("selected"+selected);
              setSelected(null);
            }}
          >
            <div>
              {latitude}, {longitude}
            </div>
          </InfoWindow>
        )}
  
          ))}    **//error appears when I put this brackets here But I want these the bracket         here to include the infowindow component for each marker**

        <Circle
          center={{ lat: parseFloat(latitude), lng: parseFloat(longitude) }}
          radius={500000}
        />
      </GoogleMap>
      </Fragment>
    </div>
  );
}

我曾尝试使用 fragmant 和 div 标签，但没有任何帮助。

Answer 1

如果您需要为每个标记显示信息窗口，您需要添加 React.Fragment，因为您不能返回单个元素

{markers && markers.map(({ email, latitude, longitude }) =>  {
   
   // this should return a single element
   return(
     <React.Fragment>
        <Marker
          ... marker props 
          onClick={() => {
             // set selected email
             // or other unique key for the marker like id
             // since two emails can have same coordinates
             setSelected({
               lat: parseFloat(latitude),
               lng: parseFloat(longitude),
               email 
             });
             // of create another state
             //setSelectedEmail(email)
             console.log(selected);
             
          }}
        />
        {(email?.email === email) && (
        <InfoWindow
          ... props
        </InfoWindow>
        )}
      </React.Fragment>
    ) // end of return inside the list
 })}

希望这能解决你的问题