我無法從此 Json 資料中獲取資料：https ://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_set_1_25m&companynumber=0899607494
這是錯誤： data.map 不是函式
您可以檢查 Json 的結構以了解問題（Json 資料有效）我在jsonlint.com中檢查
注意：當我嘗試使用來自jsonplaceholder.typicode.com的 Json 資料時，一切正常！
這是代碼：
import React, { useState,useEffect } from 'react';
import { StyleSheet, SafeAreaView, ScrollView,Text, View, Modal,FlatList } 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 = () => {
const [data, getData] = useState([])
const URL = 'https://flow.simpas.ai/hortus/paysagiste/category?businessid=0899607494';
useEffect(() => {
fetchData()
}, [])
const fetchData = () => {
fetch(URL)
.then((res) =>
res.json())
.then((response) => {
console.log(response);
getData(response);
})
}
return (
<SafeAreaView style={{ flex: 1}}>
<ScrollView>
<Text> List of Companies </Text>
<Text> Check Our Companies Details </Text>
<DataTable >
<DataTable.Header >
<DataTable.Title>Businessid</DataTable.Title>
<DataTable.Title>Title</DataTable.Title>
<DataTable.Title>Price</DataTable.Title>
</DataTable.Header>
</DataTable>
{data.map((item, i) => (
<DataTable.Row style={styles.tableRow} key={i}>
<DataTable.Cell> {item.businessid} </DataTable.Cell>
<DataTable.Cell> {item.title} </DataTable.Cell>
<DataTable.Cell> {item.price} </DataTable.Cell>
</DataTable.Row>
))}
</ScrollView>
</SafeAreaView>
);
};
export default List;
這是json資料：
{
"articles": [
{
"title": "3 Wattels Set 1",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=45&key=99256f5e47a9d156b66bf6b834976bd8",
"businessid": "ecofence_wattel_set_1_25m",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_set_1_25m&companynumber=0899607494",
"description": "Ensemble de 3 wattels pour donner une dynamique à une partie de votre jardin",
"price": "En savoir plus",
"liked": false
},
{
"title": "Arrondis 4m",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=25&key=feb67f749e357b59b31fdb462649c1e4",
"businessid": "ecofence_wattel_rounded",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_rounded&companynumber=0899607494",
"description": "Plessage arrondis de 4m x 1,8m\nIdéal pour cacher un élément du jardin comme une citerne, ...\n\nàpd de 990 eur htva.\nDemandez un devis",
"price": "En savoir plus",
"liked": false
},
{
"title": "Cercle 3m",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=32&key=653f67b47060f689c7a0419293c7136",
"businessid": "ecofence_wattel_circle_3m",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_circle_3m&companynumber=0899607494",
"description": "Idéal pour créer un espace intime dans le jardin.",
"price": "En savoir plus",
"liked": false
},
{
"title": "Cl?ture de wattel",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=56&key=f889b376baefc42e244d464eef017f0",
"businessid": "fence_wattel-_lenghtways_3_13_fromto_FROMTO",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=fence_wattel-_lenghtways_3_13_fromto_FROMTO&companynumber=0899607494",
"description": "Placez un premier point, puis un second pour dessiner un wattel de la longueur que vous souhaitez. \nEnsuite, choisssez la hauteur avec le curseur.",
"price": "En savoir plus",
"liked": false
},
{
"title": "Wattel 3x1,3m",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=33&key=d3c3b8dc7d30f186663491bb6994dfb",
"businessid": "ecofence_wattel_lenghtways_3_13",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_lenghtways_3_13&companynumber=0899607494",
"description": "Idéal pour faire une séparation tout en gardant une visibilité",
"price": "En savoir plus",
"liked": false
},
{
"title": "Wattel 3x1,8m",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=38&key=e34d959d09d6a6961894ed5531b49",
"businessid": "ecofence_wattel_lenghtways_3_18",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_lenghtways_3_18&companynumber=0899607494",
"description": "Cacher la vue à la hauteur légale",
"price": "En savoir plus",
"liked": false
},
{
"title": "Wattel 4x1,8m",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=44&key=4464f92e9f95cb17380a7439b482e11",
"businessid": "fence_wattel_lenghtways_4_18",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=fence_wattel_lenghtways_4_18&companynumber=0899607494",
"description": "Créer des séparations d'espace avec ce module de 4m de long",
"price": "En savoir plus",
"liked": false
},
{
"title": "Wattel 4x3m",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=41&key=8acc7ab98c49d437a4d818e94342b25a",
"businessid": "ecofence_wattel_lenghtways_4_3",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_lenghtways_4_3&companynumber=0899607494",
"description": "Créer un mur complet",
"price": "En savoir plus",
"liked": false
},
{
"title": "Wattel 5x1,8m",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=50&key=c0b6538277395083e248322834a114f9",
"businessid": "ecofence_wattel_lenghtways_5_18",
"link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_lenghtways_5_18&companynumber=0899607494",
"description": "",
"price": "En savoir plus",
"liked": false
}
],
"title": "Plessage artisanal",
"businessid": "0899607494",
"cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=28&key=1025e35dcbdf9da271a91f4785869b",
"pagetype": "category",
"author": "Ecofence",
"subtitle": "coucou",
"moreinfotext": "Plus ...",
"language": "fr"
}
uj5u.com熱心網友回復：
問題是該JSON結構僅array在通過articles屬性訪問時才有效，因此您正在使用您的代碼
getData(response);
但response此時是一個“物件”，因此.map它的原型上沒有。
你可以做些什么來輕松克服這個問題：
getData(response.articles);
此外，另一個可能是改進的點是將 重命名getData為setData更適合實際發生的事情。
uj5u.com熱心網友回復：
使用可選鏈：
{data?.articles.map((item, i) => (
因為您嘗試在獲取資料之前進行映射。或者您可以使用條件渲染：
{data && data.articles.map((item, i) => (
uj5u.com熱心網友回復：
在您的 useState 中，您假設 data 是一個物件陣列。但是您正在設定一個物件而不是物件陣列。
檢查回應是否包含文章屬性，然后將其設定為 useState。否則，將其設定為空陣列。那么問題應該得到解決。
建議使用帶有型別檢查的打字稿，這樣您就可以避免此類問題。
uj5u.com熱心網友回復：
我用的是axios，目前沒問題：
To install: npm i axios
代碼用法，參考https://www.npmjs.com/package/axios
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/492394.html
標籤：javascript 反应 反应式 获取 API