文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将getStaticProps结果传递给Next.js中的传单画布层

问如何将getStaticProps结果传递给Next.js中的传单画布层
EN

Stack Overflow用户

提问于 2022-08-15 10:13:20

回答 2查看 111关注 0票数 0

我正在学习Next.js，而且我在使用getStaticProps访问API路由的结果时遇到了困难。当我在组件中的undefined对象console.log时，工作API路由会生成一个console.log。

我的API路由从Postgres数据库返回一个GeoJSON对象。我可以在localhost:3000/api/mymethod上访问结果，我已经在GeoJSON验证器中测试了结果。

我能够用两个组件来构造我的地图:映射容器本身的组件和画布层的第二个组件。然后将映射组件导入到页面中。

我是这样为Map容器构建组件的：

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
import 'leaflet-defaulticon-compatibility';
import LeafletCanvasMarker from './Pengs';

const Map = () => {
  return (
    <MapContainer center={[50.1109, 8.6821]} zoom={14} scrollWheelZoom={false} style={{height: "100vh", width: "100%"}}>
      <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
  />
      <Marker 
      position={[50.1109, 8.682]}
      draggable={true}
      animate={true}
      >
      </Marker>
      <LeafletCanvasMarker />
    </MapContainer>
  )
}

export default Map

这是我失败的画布层组件：

import { useEffect } from "react";
import { useMap } from "react-leaflet";
import "leaflet-canvas-marker";
import L from "leaflet";

export default function LeafletCanvasMarker({features}) {
  console.log({features})
  const map = useMap();
 
  useEffect(() => {
    if (!map) return;

    var ciLayer = L.canvasIconLayer({}).addTo(map);

    ciLayer.addOnClickListener(function (e, data) {
      console.log(data);
    });
    ciLayer.addOnHoverListener(function (e, data) {
      console.log(data[0].data._leaflet_id);
    });

    var icon = L.icon({
      iconUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png",
      iconSize: [20, 18],
      iconAnchor: [10, 9],
    });
    ciLayer.addLayers({features});
  }, [map]);

  return null;
}

export async function getStaticProps() {
  const data = await fetch('.api/getpoints').then(r => r.json())

  return {
    props:{ features }
    }
}

下面是带有map组件的页面

import Head from 'next/head'
import dynamic from 'next/dynamic';
const mapPage = () => {
    const MapWithNoSSR = dynamic(() => import("../components/Map"), {
        ssr: false
    });
    
    return (
        <div>
          <Head>
            <title>About</title>
          </Head>
          <h1>Map of Peng spots</h1>
          <p>Map should go here!</p>
          <MapWithNoSSR />
        </div>
    )
}

export default mapPage

我的API路由是在/api/getpoints中用以下代码在index.js文件中定义的：

export default async function handler(req, res) { 
try{
const query = `SELECT json_build_object(
    'type', 'FeatureCollection',
    'features', jsonb_agg(feature)
)
FROM (
SELECT json_build_object(
'type', 'Feature',
    'geometry', ST_AsGeoJSON(geom)::JSONB,
    'properties', to_jsonb(inputs) - 'geometry'
) AS feature
FROM (
SELECT *
FROM public."Peng" AS p
JOIN public."Address_Info" AS i
ON p.id = i.id
) AS inputs
) AS features;`
const result = await conn.query(
query)
res.json(result.rows[0].json_build_object)
} 
catch (error){
    console.log(error);
}
}

在浏览器中访问localhost/api/getpoints时，将返回有效的GeoJSON。

上面的代码处理了一些虚拟数据，但我在将API数据导入组件时遇到了问题。作为相对较新的反应，接下来，我不知道我在哪里绊倒了这一点。

reactjs

next.js

leaflet

react-leaflet

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-10-11 05:59:32

因此，答案出现在其中一个最初的注释中：getStaticProps one在页面组件上工作。调用其他文件中的函数不起作用。

票数 0

Stack Overflow用户

发布于 2022-08-15 16:22:13

尝试将您的getStaticProps更改为类似的内容。然后您可以使用mapPoints或任何您想要调用的名称。

    export async function getStaticProps() {
      const data = await fetch('/api/getpoints');
      const mapPoints = await data.json();
    
      return {
        props:{ 
          features,
          mapPoints
         }
        }
    }

尝试将您的api代码更改为以下代码。

export default async function handler(req, res) { 
    try{
        const query = `SELECT json_build_object(
            'type', 'FeatureCollection',
            'features', jsonb_agg(feature)
        )
        FROM (
        SELECT json_build_object(
        'type', 'Feature',
            'geometry', ST_AsGeoJSON(geom)::JSONB,
            'properties', to_jsonb(inputs) - 'geometry'
        ) AS feature
        FROM (
        SELECT *
        FROM public."Peng" AS p
        JOIN public."Address_Info" AS i
        ON p.id = i.id
        ) AS inputs
        ) AS features;`
        const result = await conn.query(
        query)
        return(
            res.status(200).json({
                result: result.rows[0].json_build_object,
            })
        )
    } 
    catch (error){
        console.log(error);
        return(
            res.status(500).json({
                message: 'Error',
            })
        )
    }
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73359581

复制

相似问题

问如何将getStaticProps结果传递给Next.js中的传单画布层
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将getStaticProps结果传递给Next.js中的传单画布层EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将getStaticProps结果传递给Next.js中的传单画布层
EN