React实现附近出租车坐标筛选无输出问题求助

你遇到的页面无输出问题，核心是代码里的几处逻辑错误导致的，以下是具体问题和修复方案：

1. CurCoord组件：异步坐标传递时机错误 #

getCurrentPosition是异步方法，你在调用它之后立刻执行props.onCurrentCoord(lat, lng)，此时lat和lng还是初始的null，导致父组件拿到的坐标完全无效。同时useEffect的依赖数组设置错误，会触发无限循环。

修复后的CurCoord.js：

import React, { useState, useEffect } from 'react';

const CurCoord = (props) => {
  const [lat, setLat] = useState(null);
  const [lng, setLng] = useState(null);
  const [status, setStatus] = useState(null);

  const getLocation = () => {
    if (!navigator.geolocation) {
      setStatus('Geolocation is not supported by your browser');
    } else {
      setStatus('Locating...');
      navigator.geolocation.getCurrentPosition((position) => {
        setStatus(null);
        const currentLat = position.coords.latitude;
        const currentLng = position.coords.longitude;
        setLat(currentLat);
        setLng(currentLng);
        // 拿到真实坐标后再传递给父组件
        props.onCurrentCoord(currentLat, currentLng);
      }, () => {
        setStatus('Unable to retrieve your location');
      });
    }
  }

  // 空依赖数组，仅组件挂载时执行一次
  useEffect(() => {
    getLocation();
  }, [])

  return (
    <div className="App">
      <button onClick={getLocation}>Get Location</button>
      <h1>Coordinates</h1>
      <p>{status}</p>
      {lat && <p>Latitude: {lat}</p>}
      {lng && <p>Longitude: {lng}</p>}
    </div>
  );
}

export default CurCoord;

2. CountNearby组件：状态类型与数组操作错误 #

• 你把存储坐标的状态初始化为对象{}，但对象没有append方法，应该用数组[]来存储多个坐标点
• 循环中频繁调用setCloseToUserPoints会导致状态更新混乱，应该先批量筛选所有符合条件的点，再一次性更新状态
• 直接取closeToUserPoints[0]无法处理空数组情况，需要添加空状态提示并遍历渲染所有结果

修复后的CountNearby.js：

import CurCoord from './CurCoord';
import { useState } from "react";

const CountNearby = (props) => {
    // 初始化为数组，用于存储多个坐标点
    const [closeToUserPoints, setCloseToUserPoints] = useState([]);

    const handlerCurrentCoord = (latitude, longitude) => {
        // 批量筛选符合条件的出租车坐标
        const nearbyPoints = props.latLon.filter(point => {
            return Math.abs(point.Latitude - latitude) < 0.01 && 
                   Math.abs(point.Longitude - longitude) < 0.01;
        });
        // 转换格式后一次性更新状态
        const formattedPoints = nearbyPoints.map(point => ({
            nearbyLatitude: point.Latitude,
            nearbyLongitude: point.Longitude
        }));
        setCloseToUserPoints(formattedPoints);
    };

    return (
        <div>
            <CurCoord onCurrentCoord={handlerCurrentCoord} />
            {/* 处理空数组与正常渲染逻辑 */}
            {closeToUserPoints.length === 0 ? (
                <p>未找到附近的出租车</p>
            ) : (
                <div>
                    <p>附近出租车坐标：</p>
                    {closeToUserPoints.map((point, index) => (
                        <p key={index}>纬度：{point.nearbyLatitude}，经度：{point.nearbyLongitude}</p>
                    ))}
                </div>
            )}
        </div>
    );
};

export default CountNearby;

额外验证步骤 #

1. 在handlerCurrentCoord开头添加console.log(props.latLon)，确认API返回的坐标数据已正确传入组件
2. 确保已激活CORS会话，避免API请求失败导致无坐标数据

内容的提问来源于stack exchange，提问作者OJH