am stuck with problem , am not able to display fetch API data on my screen ,can anyone tell me how to display data, please try to fix my code, if you have any queries please free feel to ask.

am using nytimes api for fetching data

import React, { useEffect, useState } from 'react'
import { Text, View, FlatList,StyleSheet } from 'react-native';
// import { Card, Title, Paragraph } from 'react-native-paper';
import { Searchbar } from 'react-native-paper';


export default function Home() {

  const [searchquery, setSearchquery] = React.useState();
  const [data, setData] = useState([]);


  const getMovies = async () => {
    try {
      const response = await fetch(`https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=9OTXA7aqliGSkwHKCACiw0SLkmfzMB6g`);
      const json = await response.json();
      setData(json);
    } catch (error) {
      console.error(error);
    }
  }

  useEffect(() => {
    getMovies();
  }, []);


  return (
    <View >
      <Searchbar
        placeholder="Search Books"
        onChangeText={(query) => setSearchquery(query)}
        value={searchquery}
        style={{ marginTop: 30, marginHorizontal: 10 }}
      />
      <FlatList
        data={data}
        keyExtractor={({ id }, index) => id}
        renderItem={({ item }) => (
          <Text style={styles.customText}> {item.json}</Text>
        )}
      />
    </View>
  );
}


const styles = StyleSheet.create({
  customText: {
   padding:10,
   marginTop:20,
   textAlign:'center',
   backgroundColor:'lightgray',
   fontWeight:'bold'
  },

});

CodePudding user response：

First of all, You shouldn't post your private API keys in a public forum.

Now coming to your problem, You are supposed to give FlatList an Array to loop over. The FlatList component will loop over each item in your array and you can display them using the renderItem. A quick look at your Api indicates that the api response you are getting is an Object, not an array.

You probably want to loop over books array in your FlatList. Change your getMovies function to,

 const getMovies = async () => {
    try {
      const response = await fetch(`https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=9OTXA7aqliGSkwHKCACiw0SLkmfzMB6g`);
      const json = await response.json();
      setData(json.results.books); // changed json to the specific key in your api response.
    } catch (error) {
      console.error(error);
    }
  }

and in your FlatList, you can use,

 <FlatList
  data={data}
  keyExtractor={item => item.book_uri}
  renderItem={({ item }) => (
    <Text style={styles.customText}>{item.title}</Text> // to display title.. like this map all your data based on the key received in api response.
  )}
/>

CodePudding user response：

Try

<FlatList
        data={data}
        keyExtractor={item => id}
        renderItem={({ item }) => (
          <Text style={styles.customText}> {item.json}</Text>
        )}
      />

Use id.toString() if id is not a string.