我想從我的 JSON 中顯示一些資料。具體來說，我想顯示一個嵌套陣列，但我使用 map() 卡住了。我想顯示為串列的欄位是分析指令，如下所示：
如何準備（來自 p How to prep /p）
腳步：
- 去除花椰菜堅硬的莖，留作其他用途。使用食品加工機，脈沖花椰菜小花，直到它們像米飯或蒸粗麥粉。最后你應該得到大約四杯“花椰菜飯”。
原料：
- 花椰菜小花
- 花椰菜飯ecc
設備：
- 食品加工機
依此類推，第 2、3、4 步......
你能幫我嗎？謝謝
{
"pathname": "/recipe/716426",
"search": "",
"hash": "",
"state": {
"meal": {
"vegetarian": true,
"vegan": true,
"glutenFree": true,
"dairyFree": true,
"veryHealthy": true,
"cheap": false,
"veryPopular": true,
"sustainable": false,
"weightWatcherSmartPoints": 4,
"gaps": "no",
"lowFodmap": false,
"aggregateLikes": 3689,
"spoonacularScore": 100,
"healthScore": 76,
"creditsText": "Full Belly Sisters",
"license": "CC BY-SA 3.0",
"sourceName": "Full Belly Sisters",
"pricePerServing": 112.39,
"id": 716426,
"title": "Cauliflower, Brown Rice, and Vegetable Fried Rice",
"readyInMinutes": 30,
"servings": 8,
"sourceUrl": "http://fullbellysisters.blogspot.com/2012/01/cauliflower-fried-rice-more-veggies.html",
"image": "https://spoonacular.com/recipeImages/716426-312x231.jpg",
"imageType": "jpg",
"summary": "Cauliflower, Brown Rice, and Vegetable Fried Rice might be a good recipe to expand your side dish recipe box. Watching your figure? This gluten free, dairy free, lacto ovo vegetarian, and vegan recipe has <b>192 calories</b>, <b>7g of protein</b>, and <b>6g of fat</b> per serving. For <b>$1.12 per serving</b>, this recipe <b>covers 19%</b> of your daily requirements of vitamins and minerals. This recipe serves 8. This recipe from fullbellysisters.blogspot.com has 3689 fans. This recipe is typical of Chinese cuisine. From preparation to the plate, this recipe takes about <b>30 minutes</b>. Head to the store and pick up peas, broccoli, salt, and a few other things to make it today. Overall, this recipe earns an <b>awesome spoonacular score of 100%</b>. Users who liked this recipe also liked <a href=\"https://spoonacular.com/recipes/vegetable-fried-brown-rice-36199\">Vegetable Fried Brown Rice</a>, <a href=\"https://spoonacular.com/recipes/vegetable-fried-cauliflower-rice-933261\">Vegetable Fried Cauliflower Rice</a>, and <a href=\"https://spoonacular.com/recipes/easy-vegetable-fried-brown-rice-with-egg-802042\">Easy Vegetable Fried Brown Rice with Egg</a>.",
"cuisines": [
"Chinese",
"Asian"
],
"dishTypes": [
"side dish"
],
"diets": [
"gluten free",
"dairy free",
"lacto ovo vegetarian",
"vegan"
],
"occasions": [],
"analyzedInstructions": [
{
"name": "",
"steps": [
{
"number": 1,
"step": "Remove the cauliflower's tough stem and reserve for another use. Using a food processor, pulse cauliflower florets until they resemble rice or couscous. You should end up with around four cups of \"cauliflower rice.\"",
"ingredients": [
{
"id": 10011135,
"name": "cauliflower florets",
"localizedName": "cauliflower florets",
"image": "cauliflower.jpg"
},
{
"id": 10111135,
"name": "cauliflower rice",
"localizedName": "cauliflower rice",
"image": "cauliflower.jpg"
},
{
"id": 11135,
"name": "cauliflower",
"localizedName": "cauliflower",
"image": "cauliflower.jpg"
},
{
"id": 20028,
"name": "couscous",
"localizedName": "couscous",
"image": "couscous-cooked.jpg"
},
{
"id": 20444,
"name": "rice",
"localizedName": "rice",
"image": "uncooked-white-rice.png"
}
],
"equipment": [
{
"id": 404771,
"name": "food processor",
"localizedName": "food processor",
"image": "food-processor.png"
}
]
},
{
"number": 2,
"step": "Heat 1T butter and 1T oil in a large skillet over medium heat.",
"ingredients": [
{
"id": 1001,
"name": "butter",
"localizedName": "butter",
"image": "butter-sliced.jpg"
},
{
"id": 4582,
"name": "cooking oil",
"localizedName": "cooking oil",
"image": "vegetable-oil.jpg"
}
],
"equipment": [
{
"id": 404645,
"name": "frying pan",
"localizedName": "frying pan",
"image": "pan.png"
}
]
},
{
"number": 3,
"step": "Add garlic and the white and light green pieces of scallion. Sauté about a minute.",
"ingredients": [
{
"id": 11291,
"name": "green onions",
"localizedName": "green onions",
"image": "spring-onions.jpg"
},
{
"id": 11215,
"name": "garlic",
"localizedName": "garlic",
"image": "garlic.png"
}
],
"equipment": []
},
{
"number": 4,
"step": "Add the cauliflower to the pan. Stir to coat with oil, then spread out in pan and let sit; you want it cook a bit and to caramelize (get a bit brown), which will bring out the sweetness. After a couple of minutes, stir and spread out again.",
"ingredients": [
{
"id": 11135,
"name": "cauliflower",
"localizedName": "cauliflower",
"image": "cauliflower.jpg"
},
{
"id": 0,
"name": "spread",
"localizedName": "spread",
"image": ""
},
{
"id": 4582,
"name": "cooking oil",
"localizedName": "cooking oil",
"image": "vegetable-oil.jpg"
}
],
"equipment": [
{
"id": 404645,
"name": "frying pan",
"localizedName": "frying pan",
"image": "pan.png"
}
]
},
{
"number": 5,
"step": "Add cold rice (it separates easily, so it won't clump up during cooking), plus the additional grapeseed and coconut oil or butter. Raise heat to medium-high. Toss everything together and, again, spread the mixture out over the whole pan and press a bit into the bottom.",
"ingredients": [
{
"id": 4047,
"name": "coconut oil",
"localizedName": "coconut oil",
"image": "oil-coconut.jpg"
},
{
"id": 1001,
"name": "butter",
"localizedName": "butter",
"image": "butter-sliced.jpg"
},
{
"id": 0,
"name": "spread",
"localizedName": "spread",
"image": ""
},
{
"id": 20444,
"name": "rice",
"localizedName": "rice",
"image": "uncooked-white-rice.png"
}
],
"equipment": [
{
"id": 404645,
"name": "frying pan",
"localizedName": "frying pan",
"image": "pan.png"
}
]
},
{
"number": 6,
"step": "Let it sit for about two minutes—so the rice can get toasted and a little crispy.",
"ingredients": [
{
"id": 20444,
"name": "rice",
"localizedName": "rice",
"image": "uncooked-white-rice.png"
}
],
"equipment": [],
"length": {
"number": 2,
"unit": "minutes"
}
},
{
"number": 7,
"step": "Add the peas and broccoli and stir again.",
"ingredients": [
{
"id": 11090,
"name": "broccoli",
"localizedName": "broccoli",
"image": "broccoli.jpg"
},
{
"id": 11304,
"name": "peas",
"localizedName": "peas",
"image": "peas.jpg"
}
],
"equipment": []
},
{
"number": 8,
"step": "Drizzle soy sauce and toasted sesame oil over rice.Cook for another minute or so and turn off heat.",
"ingredients": [
{
"id": 4058,
"name": "sesame oil",
"localizedName": "sesame oil",
"image": "sesame-oil.png"
},
{
"id": 16124,
"name": "soy sauce",
"localizedName": "soy sauce",
"image": "soy-sauce.jpg"
},
{
"id": 20444,
"name": "rice",
"localizedName": "rice",
"image": "uncooked-white-rice.png"
}
],
"equipment": []
},
{
"number": 9,
"step": "Add chopped scallion tops and toss.I like to toast some sesame seeds in a dry pan; I sprinkle these and some more raw, chopped scallion over the top of the rice for added flavor and crunch.Season to taste with salt and, if you'd like, more soy sauce. Keep in mind that if you're serving this with something salty and saucy (ie. teriyaki chicken) you may want to hold off on adding too much salt to the fried rice.",
"ingredients": [
{
"id": 12023,
"name": "sesame seeds",
"localizedName": "sesame seeds",
"image": "sesame-seeds.png"
},
{
"id": 16124,
"name": "soy sauce",
"localizedName": "soy sauce",
"image": "soy-sauce.jpg"
},
{
"id": 11291,
"name": "green onions",
"localizedName": "green onions",
"image": "spring-onions.jpg"
},
{
"id": 5006,
"name": "whole chicken",
"localizedName": "whole chicken",
"image": "whole-chicken.jpg"
},
{
"id": 18070,
"name": "toast",
"localizedName": "toast",
"image": "toast"
},
{
"id": 20444,
"name": "rice",
"localizedName": "rice",
"image": "uncooked-white-rice.png"
},
{
"id": 2047,
"name": "salt",
"localizedName": "salt",
"image": "salt.jpg"
}
],
"equipment": [
{
"id": 404645,
"name": "frying pan",
"localizedName": "frying pan",
"image": "pan.png"
}
]
}
]
}
],
"spoonacularSourceUrl": "https://spoonacular.com/cauliflower-brown-rice-and-vegetable-fried-rice-716426"
}
},
"key": "qqtrw8b0"}
import React from "react";
import Meal from "../Meal";
import { useLocation } from "react-router-dom";
export default function Recipe() {
const location = useLocation();
console.log(location);
return (
<div>
<h1>{location.state.meal.title}</h1>
<img src={location.state.meal.image} alt="recipe"></img>
<p>pricePerServing {location.state.meal.pricePerServing}</p>
<p>readyInMinutes {location.state.meal.readyInMinutes}</p>
<p>servings {location.state.meal.servings} </p>
<p>vegetarian {(location.state.meal.vegetarian) ? "V" : "F"}</p>
{/* <p>diets {location.state.meal.diets.map((key, diet)=>{
return (
<li key={diet}>{key}</li>
)
})}
</p> */}
<p>How to prep</p>
<p>{location.state.meal.analyzedInstructions.map((ai, key)=>{
<ul>
{ai.steps.map((stepp, key)=>{
<li key={key}> {stepp.step}</li>
})}
</ul>
})}</p>
</div>
);
}
uj5u.com熱心網友回復：
首先，analyzedInstructions 是一個包含 1 個元素的陣列。所以代碼需要閱讀location.state.meal.analyzedInstructions[0].steps.map。
其次，這是制作一個專門的子組件并映射到它的絕佳機會，避免元素和諸如此類的嵌套混亂。
這是一個codeandbox 演示。我在上面使用了 Typescript 和 @mui/material，但這只是因為我想讓它看起來更整潔。隨意復制它并洗掉這些部分。
ETA： 沒有 @mui 和 typescript 的版本。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/397739.html
標籤：javascript 反应 json 反应原生 反应路由器
上一篇：如何在沒有此錯誤的情況下將ASP.NetWebapi連接到Angular錯誤：嘗試比較“[objectObject]”時出錯。只允許陣列和可迭代物件