我無法在ReactNative中將資料提取到我的資料表中？

我想將資料提取到我的資料表中我收到此錯誤：未定義不是物件（評估“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'）的屬性

這是我從中獲取的網站：

這里

謝謝大家會盡力幫助我

uj5u.com熱心網友回復：

異步函式

  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)
     }

     }

uj5u.com熱心網友回復：

您必須使 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() 方法確實有助于清理它并使其可訪問。

uj5u.com熱心網友回復：

首先，我強烈建議您使用<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>}
   />

標籤：javascript 反应 反应式 获取 API

上一篇：跨單獨mat檔案的平均雙精度陣列

下一篇：將相似的鍵值對分組為單個陣列