React Native 下载 JSON 但未显示在 Flatlist 中

Question

我正在尝试下载 JSON。 React Native 正在下载 json，但我不确定为什么 Flatlist 没有显示这些项目。如果我将 flatlist 中的 data={dummyData} 更改为 data={MyList} ，那么 flatlist 就可以显示了。

let viewableItemsChanged = null;
const dummyData = GrabData('http://hunterdata.serveblog.net/10record.json');

const MyList = [
    {"id":"0","title":"MyBook0","url":"URLBook-0","image":"image-0" },
    {"id":"1","title":"MyBook1","url":"URLBook-1","image":"image-1" },
    {"id":"2","title":"MyBook2","url":"URLBook-2","image":"image-2" },
    {"id":"3","title":"MyBook3","url":"URLBook-3","image":"image-3" },
    {"id":"4","title":"MyBook4","url":"URLBook-4","image":"image-4" },
    {"id":"5","title":"MyBook5","url":"URLBook-5","image":"image-5" }];


async function GrabData(TheURL) {
  let abc = [];
  try {
    let response = await fetch(TheURL, {headers: {'Cache-Control' : 'no-cache'}});
    let responseJson = await response.json();
    console.log(responseJson);
    return responseJson;
  } catch (error) {
    console.error(error);
  }
}

const renderItem = ({item}) => {
  return <View><Text>{item.title}</Text></View>
}

const List = () => {
  return (
    <FlatList
      style={styles.list}
      data={dummyData}
      renderItem={renderItem}
    />

  )
};

Answer 1

您的代码有问题。您正在调用没有 await 关键字的 async function。所以它会像这样返回未定义的响应。 {"_U": 0, "_V": 0, "_W": null, "_X": null}

请尝试此解决方案。

import React, { useEffect , useState } from 'react';
    import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
    
    const Item = ({ title }) => (
      <View style={styles.item}>
        <Text style={styles.title}>{title}</Text>
      </View>
    );
    
    const App = () => {
       
        
        const [data, setData] = useState([])
       
         useEffect(() => {
            apicall();
        },[])
    
        const apicall = async () => {
            let dd = await GrabData("http://hunterdata.serveblog.net/10record.json");
            setData(dd)
        }
        
        const GrabData = async (TheURL) => {
            try {
                let response = await fetch(TheURL, {headers: {'Cache-Control' : 'no-cache'}});
                let responseJson = await response.json();
              
                return responseJson;
              } catch (error) {
                console.error(error);
              }
        }
    
    
        const renderItem = ({ item }) => (
            <Item title={item?.title} />
        );
    
      return (
        <SafeAreaView style={styles.container}>
          <FlatList
            data={data}
            renderItem={renderItem}
            keyExtractor={item => item?.id}
          />
        </SafeAreaView>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
      },
      item: {
        backgroundColor: '#f9c2ff',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
      },
      title: {
        fontSize: 32,
      },
    });
    
    export default App;

Answer 2

您应该激活 componentDidMount 中的函数，同时尝试使用 states 而不是 const