创建React App中JSON提取的对象列表

Question

我对如何解决这个问题有些困惑。我正在尝试从DB中获取特定食谱的成分数据，然后在我的React应用中将其显示在成分组件中。

并且使用以下内容获得标题和blub blubs blub for以下内容非常容易：

我使用fetch调用我的后端来获取数据， 我认为最好是通过对象完成）我迷路了。只是希望解决这个问题。这是JSON响应：

0:
  id: 11
  ingredient_id: 11
  ingredient_name: "lemon"
  measure: "cups"
  quantity: "2"
  recipe_blurb: "Delicious"
  recipe_id: 6
  recipe_name: "Bolognese"
  [[Prototype]]: Object
1:
  id: 12
  ingredient_id: 12
  ingredient_name: "garlic"
  measure: "cloves"
  quantity: "5"
  recipe_blurb: "Delicious"
  recipe_id: 6
  recipe_name: "Bolognese"
  [[Prototype]]: Object
2:
  id: 13
  ingredient_id: 13
  ingredient_name: "butter"
  measure: "g"
  quantity: "500"
  recipe_blurb: "Delicious"
  recipe_id: 6
  recipe_name: "Bolognese"
  [[Prototype]]: Object
length: 3
[[Prototype]]: Array(0)

这是React代码：

export default function GetRecipe() {
  const [name, setName] = useState('')
  const [recipeInfo, setRecipeInfo] = useState([])

//fetch
  const retrieveRecipe = function (e) {
    e.preventDefault()
    console.log(name)
    fetch(`http://localhost:3001/getjoinedrecipes/?name=${name}`, {
      method: 'GET',
      headers: { 'Content-type': 'application/json' },
    })
      .then((resp) => resp.json())
      .then((json) => {
        let result = json
        setRecipeInfo(result)
      })
  }

  return (
    <div>
      [...]
      <div>
        <PageContainer
          recipeName={recipeInfo.length ? recipeInfo[0].recipe_name : ''}
          recipeBlurb={recipeInfo.length ? recipeInfo[0].recipe_blurb : ''}
          //insert method here
        ></PageContainer>
      </div>
    </div>
  )
}

另外，如果它有用 - 这是ingredientNamequant组件，其中成分最终将最终出现 - 不确定如何动态地为每种成分创建其他成分的其他元素食谱...

import './IngredientNameQuant.css'

function IngredientNameQuant() {
  return (
    <div>
      <div className="ingredient-quantity"></div>
      <div className="ingredient-measure"></div>
      <div className="ingredient-name"></div>
    </div>
  )
}

export default IngredientNameQuant

Answer 1

这是我所做的，似乎有效：

let ingredientList = []
        for (let i = 0; i < result.length; i++) {
          const ingObject = {
            name: result[i].ingredient_name,
            quantity: result[i].quantity,
            measure: result[i].measure,
          }
          ingredientList.push(ingObject)