Блог

Я пытаюсь отобразить массив, в котором внутри я использую компонент маркера из листовки React. Если я использую только компонент маркера, все в порядке, но если внутри компонента маркера я использую всплывающий компонент, я получаю эту ошибку.

Ошибка типа: Не удается прочитать свойство «инициализировать» неопределенного

 const Location = () => {
  const [shops, setShops] = useState([]);

  useEffect(() => {
    const fetchShops = async () => {
      const fetchedShops = await getShops();
      console.log(fetchedShops);
      setShops(fetchedShops);
    };
    fetchShops();
  }, []);

  return (
    <MapContainer
      center={[27.8617, -101.1255]}
      zoom={15}
      scrollWheelZoom={true}
      style={{ height: "100vh" }}
      zoomAnimation={true}
    >
      <TileLayer
        attribution='amp;copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />

      {shops?.map((shop) => (
        <Marker position={shop?.location}>
          // If i remove this all work fine
          <Popup>Hola mundo</Popup>
        </Marker>
      ))}
    </MapContainer>
  );
};