使用 Native React 中的 Fetch 从 API 中提取数据

Question

 const [data, setData] = useState(null); var myHeaders = new Headers(); myHeaders.append("Content-Type", "application/json"); var raw = JSON.stringify({ "CariId": 2, "CariBakiyeyeSadeceOnayliFaturalarYansisin": false, "DonemId": 1, "BasTarih": "01.01.2021", "BitTarih": "01.01.2023" }); var requestOptions = { method: 'POST', headers: myHeaders, body: raw, redirect: 'follow' }; useEffect(() => { const fetchData = async () => { const response = await fetch("http://192.168.1.30:2828/CodesAndroid.svc/CariHesapListesiDetayli", requestOptions); const result = await response.text(); const parsedResult=JSON.parse(result); const deneme =JSON.parse(parsedResult) setData(parsedResult); }; fetchData(); }, []);

 <View style={{flex:0.5}}> <FlatList data={data} renderItem={({ item }) => ( <View > <Text style={{color:'red'}}>{data}</Text> </View> )} keyExtractor={item => item.CariId}/> </View>

I can get the data from the API with the help of Javascript, but I don't know how to get it one by one? My research has yielded no results. I would be very happy if you could help. Thanks...

Answer 1

I think your error has nothing to do with your fetch and more to do with data initialized to null here:

const [data, setData] = useState(null);

On the first render null doesn't have a map property. So I think it is throwing an error before the fetch can even complete. So if you initialize it to

const [data, setData] = useState([]);

that should get you pass the first render. After that you can figure out if your fetch is the issue