Question

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

中获取一些数据

当我尝试console.log结果时，它将返回完整的API响应。我不知道为什么在第一个result.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];
};

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中的stop对象没有名为distance的成员，因此您在那里所拥有的将无法正常工作。从我对API响应的快速浏览中，我看不到站点的任何唯一ID，所以最好让React从索引中自动为其键值。

使用挂钩反应来自API的本机加载数据

1 个答案: