React Native：Flatlist 不適用於 json

Question

這是我的 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).",
    }]      
}

這就是我導入 json 文件並使用平面列表的方式

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

我收到錯誤Invalid Violation: Tried to get frame for out of range index NaN 。請有人幫助我我正在嘗試 output 我的Paper自定義組件中的數據，這不會導致錯誤，它是 Flatlist

Answer 1

您應該使用 customData.recipies 更改數據道具

data={customData.recipies}

Answer 2

嘗試這個：

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

Erhan Namal說您需要將data屬性的值更改為customData.recipies是正確的，因為 Flatlist 的data屬性需要一個數組（ https://reactnative.dev/docs/flatlist.html#data ）。

如果您調用renderItem您需要實際傳遞該項目。

並且numColumns需要一個關鍵屬性才能工作。

您的 json 中也沒有item屬性，因此將renderItem更改為：

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