ReactJS中Turup函数组件为何会渲染出两组结果（一组有值一组为空）？

嘿，我来帮你揪出这个问题的根源～

你现在得到两组结果，一组有效一组空，核心原因是你遍历的对象结构和预期不符：

• 你提供的nearbyPlace是一个顶层对象，里面包含两个键：location（存着地址信息的对象）和distance（存着距离的数字）。
• 当你用Object.entries(nearbyPlace)遍历它时，会得到两个键值对：
  1. 第一组是['location', 你的地址对象]，这对应你看到的“有效数据”组（不过你的代码里没实际渲染value里的属性值，所以其实现在也看不到具体内容，得补上）；
  2. 第二组是['distance', 859.255...]，这时候value是个数字，没有name/address这些属性，所以渲染出来就是空值的条目。

解决方案 #

根据你的需求，分两种情况处理：

情况1：只需要渲染单个地点的信息

直接提取nearbyPlace里的location和distance来渲染，不用遍历整个对象：

function Turup() {
  const { location, distance } = nearbyPlace;
  return (
    <div>
      <ul>
        <li className='font-bold'>name : {location.name}</li>
        <li>address : {location.address}</li>
        <li>phone : {location.phone}</li>
        <li>facility : {location.facility}</li>
        <li>latitude : {location.lat}</li>
        <li>longitude : {location.lng}</li>
        <li>distance : {distance.toFixed(2)} meters</li> {/* 可选：格式化距离显示 */}
      </ul>
    </div>
  )
}

情况2：nearbyPlace应该是多个地点的数组

如果你的实际需求是渲染多个附近地点，那可能是数据结构不对——应该是一个包含多个地点对象的数组，比如[{location: {...}, distance: ...}, {...}]。这时候直接遍历数组即可：

// 假设这里的变量是nearbyPlaces（复数，代表多个地点）
function Turup() {
  return nearbyPlaces.map((place, index) => (
    <div key={index}>
      <ul>
        <li className='font-bold'>name : {place.location.name}</li>
        <li>address : {place.location.address}</li>
        <li>phone : {place.location.phone}</li>
        <li>facility : {place.location.facility}</li>
        <li>latitude : {place.location.lat}</li>
        <li>longitude : {place.location.lng}</li>
        <li>distance : {place.distance.toFixed(2)} meters</li>
      </ul>
    </div>
  ))
}

额外提醒 #

你原来的代码里，虽然写了li标签，但并没有把value里的实际数据插进去（比如{value.name}），就算是第一组也不会显示具体内容，记得补上哦～

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