React Native：Flatlist 不适用于 json

Question

This is my json object

{"recipies" : [
    {
      "id": "1595929638-20",
      "recipies": "Snickerdoodles",
      "recipe name": "Snickerdoodles",
      "imageUrl": "",
      "servings": "Servings:",
      "time": "30 mins",
      "ingredients": "½ cup Butter, with salt",
      "method": "Preheat oven to 400 degrees F (200 degrees C).",
    }]      
}

This how I have imported the json file and used the flatlist

const customData = require('../Data/main.json');
const Food = () =>{
    const renderItem = (itemData) =>{
        return (
            <Paper 
                title={itemData.item.recipies}
                serves={itemData.item.servings}
                time={itemData.item.time}
                image={itemData.item.imageUrl}
            />
        )
    }
    return(
        <FlatList
            bounces={true}
            showsVerticalScrollIndicator={false}
            data={customData}
            numColumns={2}
            keyExtractor={(item, index) => item.id}
            renderItem={renderItem} />
    )
}
export default Food

I am getting the error Invalid Violation: Tried to get frame for out of range index NaN .Please can someone help me I am trying to output the data in my Paper custom component which isn't causing the error it's the Flatlist

Answer 1

You should change data props with customData.recipies

data={customData.recipies}

Answer 2

Try this:

 <FlatList
        bounces={true}
        key="portrait"
        showsVerticalScrollIndicator={false}
        keyExtractor={(item, index) => item.id}
        data={customData.recipies}
        numColumns={2}
        renderItem={({item}) => renderItem(item)}
/>

Erhan Namal was right in saying you need to change the value of the data property to customData.recipies , because Flatlist's data property expects an array ( https://reactnative.dev/docs/flatlist.html#data ).

If you call renderItem you need to actually pass the item.

And numColumns needs a key property in order to work.

Also there is no item property in your json, so change renderItem to this:

const renderItem = (itemData) =>{
   return (
      <Paper 
         title={itemData.recipies}
         serves={itemData.servings}
         time={itemData.time}
         image={itemData.imageUrl}
      />
    )
}