时间戳

首页 > 解决方案 > React Native 使用钩子从 API 加载数据

javascript - React Native 使用钩子从 API 加载数据

问题描述

我是 ReactNative 的新手，我正在尝试从这里获取一些数据https://www.dystans.org/route.json?stops=Hamburg|Berlin

当我尝试 console.log 结果时，它会返回完整的 API 响应。我不知道为什么在第一个 results.distance 中有效并返回距离，但是当我尝试在 FlatList 中执行此操作时，没有返回任何内容。有时，当我只想返回 item.distance 但不能<Text>{item.stops[0].nearByCities[0].city}</Text>在我的代码中的任何地方也无法在控制台中返回时，它会起作用。我收到错误： 未定义不是对象（评估'results.stops [0]'）

imports...

const NewOrContinueScreen = ({ navigation }) => {
  const [searchApi, results, errorMessage] = useDystans();

  console.log(results.distance);

  return (
    <SafeAreaView forceInset={{ top: "always" }}>
      <Text h3 style={styles.text}>
        Distance: {results.distance}
      </Text>
      <Spacer />
      <FlatList
        extraData={true}
        data={results}
        renderItem={({ item }) => (
          <Text>{item.distance}</Text>
          // <Text>{item.stops[0].nearByCities[0].city}</Text>
        )}
        keyExtractor={item => item.distance}
      />
      <Spacer />
    </SafeAreaView>
  );
};


const styles = StyleSheet.create({});

export default NewOrContinueScreen;

这是我的钩子代码：

import { useEffect, useState } from "react";
import dystans from "../api/dystans";

export default () => {
  const [results, setResults] = useState([]);
  const [errorMessage, setErrorMessage] = useState("");

  const searchApi = async () => {
    try {
      const response = await dystans.get("route.json?stops=Hamburg|Berlin", {});
      setResults(response.data);
    } catch (err) {
      setErrorMessage("Something went wrong with useDystans");
    }
  };

  useEffect(() => {
    searchApi();
  }, []);

  return [searchApi, results, errorMessage];
};

标签： javascriptreactjsapireact-nativereact-native-flatlist

解决方案

顾名思义，FlatList就是设计用来渲染一个列表的。您的 API 端点返回一个 JSON 对象，而不是一个数组，因此无需FlatList迭代。如果要显示列表中的所有停靠点，请尝试直接传入停靠点列表。

<FlatList
    data={results.stops}
    renderItem={({ item }) => (<Text>{item.nearByCities[0].city}</Text>)}
/>

一些旁注： (1) 该extraData参数用于指示当变量以外的变量data发生变化时列表是否应重新呈现。我认为您根本不需要它，但是即使您这样做了，传入true也不会产生任何影响，您需要将变量的名称传递给它。(2) 该keyExtractor参数用于从它们内部的字段中键入呈现的项目。API 中的停止对象没有调用成员distance，因此您在那里拥有的内容将不起作用。从我快速查看 API 响应来看，我没有看到任何唯一的停靠点 ID，因此您最好让 React 自动从索引中键入它们。

推荐阅读