Javascript 反应传单标记没有出现

我创建了一个react FC，并在“useffect”中调用了一个rest服务，它应该接收一个MapPoints数组。 对于每个贴图点，我都想创建一个“标记”，但它不起作用。。 如果我添加贴图点的“静态”列表，它会起作用

地图组件：

return isLoading 
      ? <h1>Data are loading...</h1>
      : 
      <MapContainer center={[47.217324, 13.097555]} zoom={5} scrollWheelZoom={false}>

         <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
        />
        
        <MapMarkers mapPoints={data}/>
        
    </MapContainer>

 export const MapMarkers : React.FC<Props> = ({mapPoints}) => {


    const markers = mapPoints.map((x, index) => {
        console.log(x);
        <Marker key={index} position={{lat: x.Latitude, lng: x.Longitude}}>
            <Popup>
                <span>test</span>
            </Popup>
        </Marker>
    })
    return <Fragment>{markers}</Fragment>
    
}

返回卸载
? 数据正在加载。。。
: 

MapMarkersComponent：

return isLoading 
      ? <h1>Data are loading...</h1>
      : 
      <MapContainer center={[47.217324, 13.097555]} zoom={5} scrollWheelZoom={false}>

         <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
        />
        
        <MapMarkers mapPoints={data}/>
        
    </MapContainer>

 export const MapMarkers : React.FC<Props> = ({mapPoints}) => {


    const markers = mapPoints.map((x, index) => {
        console.log(x);
        <Marker key={index} position={{lat: x.Latitude, lng: x.Longitude}}>
            <Popup>
                <span>test</span>
            </Popup>
        </Marker>
    })
    return <Fragment>{markers}</Fragment>
    
}

导出常量映射标记：React.FC=（{mapPoints}）=>{
常量标记=映射点.map（（x，索引）=>{
控制台日志（x）；
测试
})
返回{markers}
}

---

有什么想法吗？

我不确定你的错误在哪里，但我可以为你提供一个例子，让你看看它的效果

在地图组件中：

const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://api-adresse.data.gouv.fr/search/?q=paris&type=street")
      .then((response) => response.json())
      .then((response) => {
        // console.log(response);
        setData(response.features);
      });
  }, []);

  ... rest of the code as yours

在markers comp中，与您的完全相同，只是我更改了位置值，因为它与您的api不同，并且在markers函数中添加了一个return，用于映射标记

const MapMarkers = ({ mapPoints }) => {
      const markers = mapPoints.map((x, index) => {
        // console.log(x);
        const {
          geometry: { coordinates }
        } = x;
        return (
          <Marker
            key={index}
            position={{ lat: coordinates[1], lng: coordinates[0] }}
            icon={icon}
          >
            <Popup>
              <span>test</span>
            </Popup>
          </Marker>
        );
      });
    
      return markers;
    }; 

常量映射标记=（{mapPoints}）=>{
常量标记=映射点.map（（x，索引）=>{
//控制台日志（x）；
常数{
几何体：{坐标}
}=x；
返回(
测试
);
});
返回标记；
}; 

---

我终于找到了问题。。 我正在使用typescript，MapPoint对象中出现问题。。

---

因此，x.纬度未被识别。

标记

变量应位于

{}

片段之间的

内，作为起始点。对不起，是的。。复制粘贴错误…适合我。一开始你有一个空数组，然后你进行api调用，用坐标填充你的标记数组，但它们不显示？