從URL獲取Json資料[錯誤：data.map不是函式]

我無法從此 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/paysagiste/article?userid=w8&businessid=ecofence_wattel_set_1_25m&companynumber=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>author</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.author} </DataTable.Cell>
          <DataTable.Cell> {item.title} </DataTable.Cell>
          <DataTable.Cell> {item.price} </DataTable.Cell>
      </DataTable.Row>

                ))}

  </ScrollView>
  </SafeAreaView>

);
};

export default List;

這是json資料：

{
  "author": "Ecofence",
  "avatar": "",
  "title": "3 Wattels Set 1",
  "cover": "https://www.mybelgo.be:8444/isiweb/download/documentDownload.jsf?document=45&key=99256f5e47a9d156b66bf6b834976bd8",
  "pagetype": "article",
  "addtext": "Ajouter",
  "businessid": "ecofence_wattel_set_1_25m",
  "link": "https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_set_1_25m",
  "objectlink": "https://flow.simpas.ai/paysagiste/assetbundle/ecofence_wattel_set_1_25m",
  "description": "Ensemble de 3 wattels pour donner une dynamique à une partie de votre jardin",
  "price": "Devis gratuit",
  "liked": false,
  "drawtype": "spawn",
  "language": "fr",
  "tags": [
    {
      "title": "Nouveau",
      "color": "pink"
    }
  ]
}

uj5u.com熱心網友回復：

data不是一個陣列，而是一個物件，你知道的。 map是一個javascript陣列函式。

反正你不需要地圖。

  -- {data.map((item, i) => ( // delete this line

    <DataTable.Row style={styles.tableRow} key={i}>
          <DataTable.Cell> {data.author} </DataTable.Cell>
          <DataTable.Cell> {data.title} </DataTable.Cell>
          <DataTable.Cell> {data.price} </DataTable.Cell>
      </DataTable.Row>

  -- ))}  // delete this line

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

上一篇：無法從狀態中獲取文本輸入值

下一篇：如何查看信用卡到期日？