我是一名學習 React Native 的學生。我嘗試在 flatlist 中列印部分 JSON 回應，但經過 2 天的嘗試和谷歌搜索后，不幸的是我沒有得到任何進一步的資訊..但我到底想要什么？見下圖。
但目前的情況顯示如下，我不明白上面的圖片。
您可以在下面看到我的平面串列代碼。
<FlatList
data={data}
vertical
showsVerticalScrollIndicator={false}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
const renderItem = ({ item }) => <Item data={item} />;
const Item = ({ data }) => (
<View>
<View
style={{
marginLeft: 30,
marginRight: 30,
paddingTop: 30,
paddingBottom: 10,
borderBottomWidth: 1,
flexDirection: "row",
justifyContent: "space-between",
}}
>
<View>
<Text
style={{
fontSize: FONTS.body5,
}}
>
{data.products[0].name}
</Text>
</View>
<View>
<Text
style={{
fontSize: FONTS.h3,
}}
>
{data.products[0].amount}{" "}
{data.products[0].amount_unit.short}
</Text>
</View>
</View>
</View>
);
您可以在下面看到我將如何通過 API 存盤資料。
const [data, setData] = React.useState({});
const [Runned, setRunned] = React.useState(false);
async function getValueSecure() {
if (Runned == false) {
let result = await SecureStore.getItemAsync("key");
if (result) {
fetch(
"http://---/api/ingredients/?id="
receipt?.id
".json",
{
method: "GET",
headers: {
Authorization: "Token " result.toString(),
},
}
)
.then((resp) => resp.json())
.then((data) => {
setData(data);
setRunned(true);
})
.catch((error) => console.log("error"));
} else {
}
}
}
function Mount() {
if (useIsFocused()) {
getValueSecure();
}
}
Mount();
在下面你可以看到運行上面的代碼后存盤在變數資料中的內容。
Array [
Object {
"products": Array [
Object {
"ah_id": "0",
"amount": 210,
"amount_unit": Object {
"id": 1,
"name": "Gram",
"short": "g",
},
"id": 1,
"jumbo_id": "0",
"name": "Riso Scotti buona idea risotto porcino",
"picnic_id": "0",
},
Object {
"ah_id": "0",
"amount": 30,
"amount_unit": Object {
"id": 1,
"name": "Gram",
"short": "g",
},
"id": 2,
"jumbo_id": "0",
"name": "ongezouten roomboter",
"picnic_id": "0",
},
Object {
"ah_id": "0",
"amount": 0.5,
"amount_unit": Object {
"id": 2,
"name": "Eetlepel",
"short": "el",
},
"id": 3,
"jumbo_id": "0",
"name": "zonnebloemolie",
"picnic_id": "0",
},
Object {
"ah_id": "0",
"amount": 1,
"amount_unit": Object {
"id": 4,
"name": "Stuk",
"short": "st",
},
"id": 4,
"jumbo_id": "0",
"name": "biefstuk",
"picnic_id": "0",
},
Object {
"ah_id": "0",
"amount": 1,
"amount_unit": Object {
"id": 3,
"name": "Theelepel",
"short": "tl",
},
"id": 5,
"jumbo_id": "0",
"name": "gedroogde oregano",
"picnic_id": "0",
},
Object {
"ah_id": "0",
"amount": 325,
"amount_unit": Object {
"id": 1,
"name": "Gram",
"short": "g",
},
"id": 6,
"jumbo_id": "0",
"name": "koelverse Italiaanse roerbakgroente kastanjechampignons",
"picnic_id": "0",
},
Object {
"ah_id": "0",
"amount": 5,
"amount_unit": Object {
"id": 1,
"name": "Gram",
"short": "g",
},
"id": 7,
"jumbo_id": "0",
"name": "verse selderij",
"picnic_id": "0",
},
Object {
"ah_id": "0",
"amount": 45,
"amount_unit": Object {
"id": 1,
"name": "Gram",
"short": "g",
},
"id": 8,
"jumbo_id": "0",
"name": "Parmigiano Reggiano-poeder",
"picnic_id": "0",
},
],
"receipt": Object {
"categories": Array [
Object {
"icon": "http://---/static/icons/cooking.png",
"id": 1,
"name": "Alles",
},
Object {
"icon": "http://---/static/icons/halal.png",
"id": 2,
"name": "Halal",
},
],
"description": "Zoek je een gerecht waarbij het lijkt alsof je uren in de keuken hebt gestaan, maar je eigenlijk al in een kwartier klaar bent? Dan zit je bij deze risotto met biefstuk helemaal goed!",
"duration": "15 min.",
"id": 1,
"kcal": "735 kcal.",
"name": "Risotto met champignons, biefstuk en parmezaan",
"photo": "http://---/static/images/baked-fries.jpg",
"priceRating": 1,
"rating": 4.8,
"user": Object {
"date_joined": "2021-12-28T22:59:10Z",
"email": "[email protected]",
"first_name": "---",
"groups": Array [],
"id": 17,
"is_active": true,
"is_staff": true,
"is_superuser": true,
"last_login": "2021-12-31T14:21:12Z",
"last_name": "---",
"password": "---",
"user_permissions": Array [],
"username": "---",
},
},
},
]
所以我想要一個平面串列，按名稱顯示此 JSON 回應中的所有產品。但是，我無法完成。希望這里有人可以幫助我進一步。我不明白我哪里做錯了。
uj5u.com熱心網友回復：
Flatlist 僅在位置 0 上找到了一個產品。這就是應用程式僅呈現單個元素的原因。
假設服務器回傳這個類似 JSON 的回應：
[
{
"products": [
{
"ah_id": "0",
"amount": 210,
"amount_unit": {
"id": 1,
"name": "Gram",
"short": "g",
},
"id": 1,
"jumbo_id": "0",
"name": "Riso Scotti buona idea risotto porcino",
"picnic_id": "0",
},
{
"ah_id": "0",
"amount": 30,
"amount_unit": {
"id": 1,
"name": "Gram",
"short": "g",
},
"id": 2,
"jumbo_id": "0",
"name": "ongezouten roomboter",
"picnic_id": "0",
},
{
"ah_id": "0",
"amount": 0.5,
"amount_unit": {
"id": 2,
"name": "Eetlepel",
"short": "el",
},
"id": 3,
"jumbo_id": "0",
"name": "zonnebloemolie",
"picnic_id": "0",
},
{
"ah_id": "0",
"amount": 1,
"amount_unit": {
"id": 4,
"name": "Stuk",
"short": "st",
},
"id": 4,
"jumbo_id": "0",
"name": "biefstuk",
"picnic_id": "0",
},
{
"ah_id": "0",
"amount": 1,
"amount_unit": {
"id": 3,
"name": "Theelepel",
"short": "tl",
},
"id": 5,
"jumbo_id": "0",
"name": "gedroogde oregano",
"picnic_id": "0",
},
{
"ah_id": "0",
"amount": 325,
"amount_unit": {
"id": 1,
"name": "Gram",
"short": "g",
},
"id": 6,
"jumbo_id": "0",
"name": "koelverse Italiaanse roerbakgroente kastanjechampignons",
"picnic_id": "0",
},
{
"ah_id": "0",
"amount": 5,
"amount_unit": {
"id": 1,
"name": "Gram",
"short": "g",
},
"id": 7,
"jumbo_id": "0",
"name": "verse selderij",
"picnic_id": "0",
},
{
"ah_id": "0",
"amount": 45,
"amount_unit": {
"id": 1,
"name": "Gram",
"short": "g",
},
"id": 8,
"jumbo_id": "0",
"name": "Parmigiano Reggiano-poeder",
"picnic_id": "0",
},
],
"receipt": {
"categories":[
{
"icon": "http://---/static/icons/cooking.png",
"id": 1,
"name": "Alles",
},
{
"icon": "http://---/static/icons/halal.png",
"id": 2,
"name": "Halal",
},
],
"description": "Zoek je een gerecht waarbij het lijkt alsof je uren in de keuken hebt gestaan, maar je eigenlijk al in een kwartier klaar bent? Dan zit je bij deze risotto met biefstuk helemaal goed!",
"duration": "15 min.",
"id": 1,
"kcal": "735 kcal.",
"name": "Risotto met champignons, biefstuk en parmezaan",
"photo": "http://---/static/images/baked-fries.jpg",
"priceRating": 1,
"rating": 4.8,
"user": {
"date_joined": "2021-12-28T22:59:10Z",
"email": "[email protected]",
"first_name": "---",
"groups": [],
"id": 17,
"is_active": true,
"is_staff": true,
"is_superuser": true,
"last_login": "2021-12-31T14:21:12Z",
"last_name": "---",
"password": "---",
"user_permissions":[],
"username": "---",
},
},
},
]
這是關于如何渲染所有產品的縮小版本：
import * as React from 'react';
import { Text, View, StyleSheet,FlatList } from 'react-native';
import data from './response'
export default function App() {
const renderItem = ({ item }) => <Item data={item} />;
const Item = ({ data }) => (
<View>
<View
style={{
marginLeft: 30,
marginRight: 30,
paddingTop: 30,
paddingBottom: 10,
borderBottomWidth: 1,
flexDirection: "row",
justifyContent: "space-between",
}}
>
<View>
<Text
style={{
fontSize: 12,
}}
>
{data.name}
</Text>
</View>
<View>
<Text
style={{
fontSize: 13,
}}
>
{data.amount}{" "}
{data.amount_unit.short}
</Text>
</View>
</View>
</View>
);
return (
<FlatList
data={data[0].products}
vertical
showsVerticalScrollIndicator={false}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
)
}
我為實作結果添加了 Expo Snack
https://snack.expo.dev/@emmbyiringiro/7c6685
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/400970.html
上一篇：IntelliJIDEA中的“LAG無法采用此類引數”警告以正確使用函式
下一篇：排序依據和別名(As)