类型错误：无法获取 API 。反应原生

Question

尝试在我的应用中呈现网站内容时出现类型错误

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

export default function Home(){
    const [data,setData]= useState([{}]);
    useEffect(()=>{
        fetch('https://corona.askbhunte.com/api/v1/data/nepal')
        .then((response) => response.json())
        .then((data)=> setData(data))
        .catch((error) => alert(error));
    },[])
    
    return(
        
        <View> 
           <FlatList
          data={data}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <Text>{item.tested_positive}</Text>
          )}
        />
          
        </View>
    )
}

我想从我的应用中的网站获取数据。 屏幕呈现但不获取任何数据。

Answer 1

我怀疑是由于准初始化状态，当尝试从空对象 (item.tested_positive) 渲染 {} 时，初始渲染会抛出错误。

事实证明，响应甚至不是一个数组，而是一个对象。

{
  "tested_positive": 274869,
  "tested_negative": 1925081,
  "tested_total": 2199950,
  "in_isolation": 870,
  "quarantined": 56,
  "tested_rdt": 312402,
  "pending_result": 0,
  "recovered": 270987,
  "deaths": 3012,
  "source": "https://drive.google.com/file/d/1jt0EU0mrmfHK9k5gzgKxgD5VdMpXAVRO/view",
  "updated_at": "2021-03-09T00:00:00.000Z",
  "latest_sit_report": {
    "type": "MOHP",
    "_id": "5f8ec6b9b086da747e3e7ce9",
    "no": 253,
    "date": "2020-10-19",
    "url": "https://drive.google.com/file/d/1jt0EU0mrmfHK9k5gzgKxgD5VdMpXAVRO/view",
    "created_at": "2020-10-20T11:15:05.888Z",
    "updated_at": "2020-10-20T11:15:05.888Z",
    "__v": 0
  }
}

修复初始状态，直接渲染data。

export default function Home() {
  const [data, setData] = useState({}); // <-- just an object
  useEffect(() => {
    fetch('https://corona.askbhunte.com/api/v1/data/nepal')
      .then((response) => response.json())
      .then((data)=> setData(data))
      .catch((error) => alert(error));
  },[])
    
  return(
    <View> 
      <Text>{data.tested_positive}</Text> // <-- render from data
    </View>
  );
}