React Native中Distance与Duration无法在文本中显示的问题求助

以下是针对你遇到的问题的具体排查步骤和解决方案：

1. 确认状态更新是否触发重渲染 #

React Native只有在状态（useState/useReducer）或props发生变化时才会重新渲染组件。如果你的距离/时长数据存在普通变量而非状态中，或者更新状态时没有创建新的数组/对象实例，视图就不会更新：

• 必须使用useState管理包含Distance和Duration的地点数组：

  const [locations, setLocations] = useState(initialLocations);
  

• 更新数组时，务必返回新的数组和对象（React依赖浅比较检测变化）：

  // 错误示例：直接修改原数组，React无法检测到变化
  locations[0].distance = 5.2;
  // 正确示例：创建新对象和数组
  setLocations(prevLocations => 
    prevLocations.map((loc, idx) => 
      idx === 0 ? {...loc, distance: 5.2} : loc
    )
  );
  

2. 处理异步API调用的时序问题 #

调用Google Maps Distance Matrix API是异步操作，组件初始渲染时数据可能还未返回，导致视图显示空值：

• 使用useEffect配合async/await或Promise.all处理所有异步请求，确保数据返回后再更新状态：

  useEffect(() => {
    const fetchDurationData = async () => {
      // 批量获取所有地点的时长数据
      const updatedLocations = await Promise.all(
        locations.map(async (loc) => {
          const durationResponse = await fetch(
            `https://maps.googleapis.com/maps/api/distancematrix/json?origins=${startLat},${startLng}&destinations=${loc.lat},${loc.lng}&key=YOUR_API_KEY`
          );
          const durationData = await durationResponse.json();
          const duration = durationData.rows[0].elements[0].duration.text;
          return {...loc, duration};
        })
      );
      setLocations(updatedLocations);
    };
  
    fetchDurationData();
  }, [startLat, startLng, locations]); // 依赖项变化时重新触发
  

• 添加加载状态，避免初始渲染时显示空内容：

  const [isLoading, setIsLoading] = useState(true);
  
  // 在fetchDurationData末尾添加setIsLoading(false)
  // 渲染时判断：
  if (isLoading) {
    return <Text>加载中...</Text>;
  }
  

3. 检查渲染逻辑的字段访问正确性 #

确保在循环渲染时，正确访问Distance和Duration字段：

• 注意字段名的大小写（比如你计算的是distance还是Distance，API返回的是duration.text还是其他路径）：

  // 示例渲染代码
  <FlatList
    data={locations}
    keyExtractor={(item) => item.id.toString()}
    renderItem={({item}) => (
      <View>
        <Text>地点：{item.name}</Text>
        <Text>距离：{item.distance} km</Text>
        <Text>时长：{item.duration}</Text>
      </View>
    )}
  />
  

• 如果数据是数字类型，可以显式转为字符串避免渲染异常：{item.distance.toString()} km

4. 排查组件渲染的依赖问题 #

如果是子组件负责渲染地点信息，确保子组件能接收到更新后的props：

• 避免在子组件中使用React.memo时忽略相关依赖，或者直接移除不必要的memo包装，确保props变化时子组件重新渲染。

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