React Native：API 未加载

Question

尝试在React Native中做一个简单的API调用示例，但是，当运行应用程序时，屏幕上仅显示“正在加载...”消息，并且不会显示API。

import React, { useEffect, useState } from 'react';
import {StyleSheet, Flatlist, View, Text} from "react-native";

export default App = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData]=useState([]);
  console.log(data);

  useEffect(() => {

    fetch('https://raw.githubusercontent.com/adhithiravi/React-Hooks-Examples/master/testAPI.json')
    .then((response) => response.json())
    .then((json) => setData(json))
    .catch((error) => console.log(error))
    .finally(() => setLoading(false));



  }, []);
  return(
    <View style={{flex:1,padding:24}}>
    {isLoading ? <Text>Loading...</Text>:
    (<View style={{flex:1, flexDirection: 'column',justifyContent: 'space-between'}}>
      <Text style={{fontSize:18,color:'green', textAlign:'center'}}>{data.title}</Text>
      <Text style={{fontSize:14, color:'green', textAlign:'center',paddingBottom:10}}>Heading:</Text>

      <FlatList
              data={data.articles}
              keyExtractor={({id},index) =>id}
              renderitem={({item}) => (
                <Text>{item.id+'.' +item.title}</Text>
              )}
              />
              </View>
    )}
    </View>
  );
              };

我尝试检查代码，但没有发现任何问题。控制台中也没有显示任何错误。

Answer 1

有一些拼写错误，我解决如下：

import React, { useEffect, useState } from "react";
import { StyleSheet, FlatList, View, Text } from "react-native";

const App = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  console.log(data);

  useEffect(() => {
    fetch(
      "https://raw.githubusercontent.com/adhithiravi/React-Hooks-Examples/master/testAPI.json"
    )
      .then((response) => response.json())
      .then((json) => {
        console.log(json)
        setData(json)})
      .catch((error) => console.log(error))
      .finally(() => setLoading(false));
  }, []);
  return (
    <View style={{ flex: 1, padding: 24 }}>
      {isLoading ? (
        <Text>Loading...</Text>
      ) : (
        <View
          style={{
            flex: 1,
            flexDirection: "column",
            justifyContent: "space-between",
          }}
        >
          <Text style={{ fontSize: 18, color: "green", textAlign: "center" }}>
            {data.title}
          </Text>
          <Text
            style={{
              fontSize: 14,
              color: "green",
              textAlign: "center",
              paddingBottom: 10,
            }}
          >
            Heading:
          </Text>

          <FlatList
            data={data.articles || []}
            keyExtractor={({ id }, index) => id}
            renderItem={({ item }) => <Text>{item.id + "." + item.title}</Text>}
          />
        </View>
      )}
    </View>
  );
};

export default App;

演示预览 - https://snack.expo.dev/@emmbyiringiro/laughing-donut

Answer 2

你有一些小错别字。修复它们，你就会没事的。

原创

import {StyleSheet, Flatlist, View, Text} from "react-native";

这里应该导入为FlatList。注意大写的 L。

已修复

import {StyleSheet, FlatList, View, Text} from "react-native";

原创

renderitem={({item}) => (
                <Text>{item.id+'.' +item.title}</Text>
              )}

在第一行，它应该是带有大写 I 的 renderItem。

{"index": 1, "item": {"id": "2", "title": "GraphQL APIs FAQ"}, "separators": {"highlight": [Function highlight], "unhighlight": [Function unhighlight], "updateProps": [Function updateProps]}}
{"index": 2, "item": {"id": "3", "title": "JavaScript 101"}, "separators": {"highlight": [Function highlight], "unhighlight": [Function unhighlight], "updateProps": [Function updateProps]}}

注意传入数据的结构。所需数据位于单个“项目”内名为“项目”的单独对象内。因此，要访问它们，您应该执行以下操作。

已修复

renderItem={item => (
                  <Text>{item.item.id+'.' +item.item.title}</Text>
                )}

你也可以改进这条线

keyExtractor={({id},index) =>id}

与

keyExtractor={item => item.id}

它不会做任何视觉上的事情。但代码较少。