我無法在 React Native 中將數據提取到我的數據表中？

Question

我想將數據提取到我的數據表中我收到此錯誤：未定義不是對象（評估“data.articles.map”）

如果有人可以幫助我，這就是代碼🙏🏻：

import React, { useState,useEffect } from 'react';
import { StyleSheet, SafeAreaView, ScrollView,Text, View, Modal } from 'react-native';
import { DataTable } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import COLORS from '../src/conts/colors';
import Button from '../src/views/components/Button';


const List = ({navigation}) => {



     const [data,setData] = useState([])
     const [loading,setLoading]= useState(true)


     const fetchData = ()=>{
        fetch("https://flow.simpas.ai/hortus/paysagiste/category?businessid=0899607494")
        .then(res=>res.json())
        .then(results=>{

            setData(results)
            setLoading(false)


        })
     }

     useEffect(()=>{
          fetchData()
     },[])


const RenderCollection = ({item}) =>{

    return(

      <DataTable.Row style={styles.tableRow} key={item.businessid}>
            <DataTable.Cell textStyle={{color: '#777777',fontFamily: 'Roboto'}} onPress={() => navigation.navigate("Edit",{item})} >{item.title}</DataTable.Cell>
            <DataTable.Cell textStyle={{color: '#FEB296', fontFamily: 'Roboto'}}>{item.title}</DataTable.Cell>
            <DataTable.Cell textStyle={{color: '#777777', fontFamily: 'Roboto'}}>{item.price}</DataTable.Cell>
        </DataTable.Row>
    )
  }
return (
  <SafeAreaView style={{ flex: 1}}>
  <ScrollView
    contentContainerStyle={{paddingTop: 50, paddingHorizontal: 20}}>
    <Text style={{color: COLORS.black, fontSize: 40, fontWeight: 'bold', fontFamily: 'Roboto',textAlign: 'center'}}>
      List of Companies
    </Text>
    <Text style={{color: COLORS.grey, fontSize: 18, marginVertical: 10, fontFamily: 'Roboto', textAlign: 'center'}}>
      Check Our Companies Details
    </Text>
  <DataTable style={styles.container}   >
  <DataTable.Header style={styles.tableHeader}  >
    <DataTable.Title textStyle={{color: '#fff',fontSize: 16, fontFamily: 'Roboto'}}>BusinessId</DataTable.Title>
    <DataTable.Title textStyle={{color: '#fff',fontSize: 16, fontFamily: 'Roboto'}}>Title</DataTable.Title>
    <DataTable.Title textStyle={{color: '#fff',fontSize: 16, fontFamily: 'Roboto'}}>Price</DataTable.Title>
  </DataTable.Header>
  </DataTable>
  {
      data && data.articles.map(article => <RenderCollection item={article} />)
    }
  </ScrollView>
  </SafeAreaView>

);
};

export default List;

這是錯誤：

無法讀取未定義（'map'）的屬性

這是我從中獲取的網站：

這里

謝謝大家會盡力幫助我

Answer 1

異步函數

  const fetchData = async()=>{
     try{
      const res = await 
       fetch("https://flow.simpas.ai/hortus/paysagiste/category? 
       businessid=0899607494")
      const data = await res.json()
       setData(results)
       setLoading(false)
     }catch(error){
            setLoading(false)
            console.log(error)
     }

     }

Answer 2

您必須使 fetchData 函數異步，否則 await fetch 方法將不起作用。 您可能還必須使用 JSON.parse(data) 函數來使您的數據可從其存儲位置檢索。 嘗試這樣做：

const fetchData = async () => {
  const fetch = await fetch("https://flow.simpas.ai/hortus/paysagiste/category?businessid=0899607494")
  const response = await fetch.text();
  const parsedData = JSON.parse(response);
  setData(parsedData);
  setLoading(false);

這在我制作的房地產網站中對我有用，由於某種原因，JSON 數據未定義返回，而 JSON.parse() 方法確實有助於清理它並使其可訪問。

Answer 3

首先，我強烈建議您使用<Flatlist/>來映射數據。 當數據為空時，您將訪問空狀態方法渲染，加載狀態渲染以管理獲取期間的加載時間以及設置數據時的正常渲染。

https://reactnative.dev/docs/flatlist

其次，您並沒有真正檢查和屏蔽您的數據。 data應該被定義，但可能不是一個數組。 articles可能沒有數據等...

這是我經常使用的檢查： Array.isArray(data?.articles) && data?.articles.length > 0 ，但我在 React.js 應用程序中使用它，而不是與 ReactNative 一起使用，因為ReactNative 得到了魔法 Flatlist ;) 。

所以你的例子變成：

  <FlatList
        data={data}
        renderItem={({ item, index }) => <RenderCollection key={index} item={item}/>}
        ListEmptyComponent={() => <Text>oops...</Text>}
   />