从 Json 数据中获取数据

Question

I can't fetch Data from this Json Data: https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_set_1_25m&companynumber=0899607494

I'm Getting No Error but I can't see the Data that am trying to Fetch

The Problem is the response of API is an object and Flatlist receives an array. So by What should I replace the Flatlist?

This is The Code:

import React, { useState,useEffect } from 'react';
import {
  View,
  Text,
  TextInput,
  SafeAreaView,
  Keyboard,
  ScrollView,
  Alert,
  FlatList
} from 'react-native';

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

const EditScreen = (item) => {

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


  const fetchData = ()=>{
     fetch("https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_set_1_25m&companynumber=0899607494")
     .then(res=>res.json())
     .then((json)=>setData(json))
     .catch((error)=>console.error(error))
     .finally(()=>setLoading(false))
     }
  useEffect(()=>{
       fetchData()
  },[])

  const {businessid,link,title} = item

  const [inputs, setInputs] = React.useState({
    businessid: '',
    link: '',
    title: '',
  });
  const [errors, setErrors] = React.useState({});
  React.useState(false);


  const RenderCollection = (item) =>{

      return(

        <View style={{marginVertical: 20}}>

          <Input
            onChangeText={text => handleOnchange(text, 'businessid')}
            label="businessid"
            defaultValue={item.businessid}
          />


          <Input
            onChangeText={text => handleOnchange(text, 'link')}
            label="link"
            defaultValue={item.link}
          />

          <Input
            onChangeText={text => handleOnchange(text, 'title')}
            label="Title"
            defaultValue={item.Title}
          />


          <Button title="Save"  />
          <Button title="Cancel"  />

        </View>
      )
    }



  return (
    <SafeAreaView>
      <Loader visible={loading} />
      <ScrollView>
        <Text> Edit  </Text>
        <Text>  Now You Can Edit ! </Text>

        <FlatList
                    data={data}
                    renderItem={({item})=>{
                      return RenderCollection(item)
                    }}
                    keyExtractor={item=>item.businessid}
                    onRefresh={()=>fetchData()}
                    refreshing={loading}
                    />
      </ScrollView>
    </SafeAreaView>
  );
};

export default EditScreen;

The output should be a pre-filled form But that What am getting: enter image description here

Answer 1

You are not seeing because the response of API is an object and Flatlist receives an array. I advice you to remove Flatlist for this case.