为什么我的 lat /lng 显示为空或未定义？答案

【问题标题】：Why does my lat /lng shows null or undefined?为什么我的 lat /lng 显示为空或未定义？
【发布时间】：2022-02-15 22:46:14
【问题描述】：

我正在尝试使用 Next JS 制作 IP 地址跟踪器。我希望每次用户单击按钮时地图的坐标都会发生变化。

我的Map.js 文件：

const Maps = ({ results }) => {
console.log(results);
const [geoData, setGeoData] = useState({ lat: null, lng: null });
let lat = results.latitude;
let lng = results.longitude;
useEffect(() => {
setGeoData({ lat: lat, lng: lng });
 }, []);
 console.log(geoData);
 return (
 <MapContainer
  center={[59.2322, -12.42221]}
  zoom={14}
  scrollWheelZoom={false}
  style={{
    height: "800px",
    width: "100%",
    position: "absolute",
    zIndex: "1",
    }}
     >
   <TileLayer
     attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  {geoData.lat && geoData.lng && (
    <Marker position={[geoData.lat, geoData.lng]} />
  )}
</MapContainer>
   );  
 };

我从另一个文件传递results。

const MapsNoSSR = dynamic(() => import("./MapsNoSSR.js"), { ssr: false 
});
 import dynamic from "next/dynamic";
  const Header () => {
   ....
  return 
<MapsNoSSR results={results} />
     }

【问题讨论】：

results 对象是什么 - 它来自哪里 - 你确认它返回 results.latitude 了吗？
是的，我做到了...它来自不同的文件
你能把结果的回复贴出来
它的对象：城市：“美因河畔法兰克福”完成的请求：2 大陆：“欧洲”continent_code：“EU”国家：“德国”country_capital：“柏林”country_code：“DE”country_flag：“ cdn.ipwhois.io/flags/de.svg" country_neighbours: "CH,PL,NL,DK,BE,CZ,LU,FR,AT" country_phone: "+49" 货币: "Euro" ip: "18.184.214.33" isp: "Amazon.com,公司”纬度：50.1107715 经度：8.6822223 地区：“黑森” timezone_gmt：“GMT +1:00”
你如何将它传递给Maps - 将调用代码的代码发布到Map.js

标签： reactjs next.js

【解决方案1】：

您希望在 results 更改时再次调用您的 useEffect 挂钩，因此将 results 放入其依赖项数组中。一个空的依赖数组意味着 React 只会运行一次效果

const Maps = ({ results }) => {
  const [geoData, setGeoData] = useState({ lat: null, lng: null });
  useEffect(() => {
    setGeoData({ lat: results.lattitude, lng: results.longtitude });
  }, [results]);
  return ...;
};

另外，请确保您使用的是正确的组件。好像你有 Maps 组件然后还有 MapsNoSSR 组件

【讨论】：