使用挂钩从 API 响应本机加载数据

Question

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

当我尝试 console.log 结果时 return 完全 API 响应。我不知道为什么在第一个 results.distance 工作和 return 距离，但是当我试图在 FlatList 中执行它时，return 什么也没有。有时当我只想 return 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 端点 returns 是一个 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 自动从索引中键入它们。

使用挂钩从 API 响应本机加载数据

React Native load data from API using hooks

javascript

api

reactjs

react-native

react-native-flatlist