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

Question

我是 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> 这样的东西在我的代码中也没有在控制台中的任何地方时它会起作用。我收到错误： undefined 不是对象（评估 '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];
};

Answer 1

顾名思义，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 自动从索引中键入它们。