嗨，伙計們，我如何在反應組件上呈現這些成分而不必寫出“strIngredient1”到“strIngredient20”

如何在反應組件上呈現這些成分而不必寫出“strIngredient1”到“strIngredient20”？這是 JSON 檔案的片段。

  {"meals":[{   
        "idMeal":"8000",
        "strMeal":"Buffalo Cauliflower",
        "strDrinkAlternate":null,
        "strCategory":"vegeterian",
        "strDescription":,
        "strInstructions":,
        "strMealThumb":"https://gimmedelicious.com/wp-content/uploads/2016/01/caulfilower-buffalo- 
          wings-15-of-17.jpg",
        "strIngredient1":"Medium Head Cauliflower",
        "strIngredient2":"Panko Breadcrumbs",
        "strIngredient3":"Vegetable Oil",
        "strIngredient4":"Fine Sea Salt",
        "strIngredient5":"All-Purpose Flour",
        "strIngredient6":"Rice Flour",
        "strIngredient7":"Smoked Paprika",
        "strIngredient8":"Sweet Paprika",
        "strIngredient9":"Garlic Powder",
        "strIngredient10":"Onion Powder",
        "strIngredient11":"Fish Sauce",
        "strIngredient12":"Milk",
        "strIngredient13":"Buffalo Sauce, Such as Frank’s Red Hot",
        "strIngredient14":"Honey",
        "strIngredient15":"Celery Stalk, Leaves Included, Thinly Sliced",
        "strMeasure1":"1",
        "strMeasure2":"2 cups ",
        "strMeasure3":"? cup",
        "strMeasure4":"? teaspoon",
        "strMeasure5":"? cup ",
        "strMeasure6":"? cup",
        "strMeasure7":"? teaspoons",
        "strMeasure8":"? teaspoon",
        "strMeasure9":"1 teaspoon",
        "strMeasure10":"1 teaspoon",
        "strMeasure11":"2 teaspoon",
        "strMeasure12":"? cup",
        "strMeasure13":"1 cup",
        "strMeasure14":"3 tablespoons",
        "strMeasure15":"1"
}]}

uj5u.com熱心網友回復：

您可以在傳遞每個配方進行渲染之前對其進行預處理。

var orig = {
  idMeal: "8000",
  strMeal: "Buffalo Cauliflower",
  strDrinkAlternate: null,
  strCategory: "vegeterian",
  strDescription: "",
  strInstructions: "",
  strIngredient1: "Medium Head Cauliflower",
  strIngredient2: "Panko Breadcrumbs",
  strIngredient3: "Vegetable Oil",
  strIngredient4: "Fine Sea Salt",
  strMeasure1: "1",
  strMeasure2: "2 cups ",
  strMeasure3: "? cup",
  strMeasure4: "? teaspoon",
  // rest of ingredients removed for brevity
};

function processRecipe(recipe) {
  const processedRecipe = { ...recipe };
  const ingredients = [];
  for (let i = 1; ; i  ) {
    const ingredientKey = `strIngredient${i}`;
    const measureKey = `strMeasure${i}`;
    const ingredient = processedRecipe[ingredientKey];
    const measure = processedRecipe[measureKey];
    if (!(ingredient && measure)) break;
    ingredients.push([ingredient, measure]);
    delete processedRecipe[ingredientKey];
    delete processedRecipe[measureKey];
  }
  return { ...processedRecipe, ingredients };
}

console.log(processRecipe(orig));

有了這個，輸出是例如

{
  "idMeal": "8000",
  "strMeal": "Buffalo Cauliflower",
  "strDrinkAlternate": null,
  "strCategory": "vegeterian",
  "strDescription": "",
  "strInstructions": "",
  "ingredients": [
    [
      "Medium Head Cauliflower",
      "1"
    ],
    [
      "Panko Breadcrumbs",
      "2 cups "
    ],
    [
      "Vegetable Oil",
      "? cup"
    ],
    [
      "Fine Sea Salt",
      "? teaspoon"
    ]
  ]
}

和這樣的成分串列很容易回圈。

uj5u.com熱心網友回復：

首先，我認為您沒有以最好的方式使用 JSON，我會做一些看起來更像這樣的事情：

    {"meals":[{   
        "idMeal":"8000",
        "strMeal":"Buffalo Cauliflower",
        "strDrinkAlternate":null,
        "strCategory":"vegeterian",
        "strDescription":,
        "strInstructions":,
        "strMealThumb":"https://gimmedelicious.com/wp-content/uploads/2016/01/caulfilower-buffalo- 
          wings-15-of-17.jpg",
        "ingredients": [
          {name:"Medium Head Cauliflower", "measure":1},
          {name:"Panko Breadcrumbs", "measure": "2 cups"},
// etc ...
           ]

}]}

然后在反應中簡單地使用 .map

例如

function Meal({meal}) {

...
return (
  <>
    {meal.ingredients.map((ingredient)=>{
      return (
        <div key={ingredient.name}>{ingredient.name} measurement : {ingredient.measure}</div>
      )
    }
  )}
</>

)
...

}

標籤：数组 反应 json jsx

上一篇：c 3d陣列函式回傳

下一篇：獲取錯誤：二元運算子“==”不能應用于兩個“x”運算元，如何洗掉此物件陣列中的特定數量的元素