0

我正在创建一个反应配方应用程序。我正在使用 Edamam API（食物食谱）。如何将食谱卡路里转换/计算为每份的卡路里量？也许将它四舍五入到整数？

现在我的浏览器中的组件，Chrome 开发者工具，看起来像这样： props

{
    calories:3033.2012500008163
    image:"https://www.edamam.com/web-img/e12/e12b8c5581226d7639168f41d126f2ff.jpg"
    ingredients: [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
    title:"Chicken Paprikash"
    new entry:  ""
}

APP.JS（部分）

<div className="recipe-section">
        {recipes.map((recipe) => (
          //label ---- title
          <Recipe
            key={recipe.recipe.label} // cba ge it
            title={recipe.recipe.label}
            calories={recipe.recipe.calories}
            image={recipe.recipe.image}
            ingredients={recipe.recipe.ingredients}
          />
        ))}
      </div>

食谱.JS

import React from "react";
import style from "./recipe.module.css";

const Recipe = ({ title, calories, image, ingredients }) => {
  return (
    <div className={style.recipe}>
      <h1> {title} </h1>
      <ol>
        {ingredients.map((ingredient) => (
          <ul> {ingredient.text} </ul>
        ))}
      </ol>
      <p> {calories} </p>
      <img className={style.picture} src={image} alt="" />
    </div>
  );
};

export default Recipe;

谢谢你。如果您需要更多信息，请告诉我！

4

1 回答 1

2

你有两个选择：

  1. 您可以控制渲染数据的方式并在渲染功能期间舍入卡路里数量，这样您就可以使 Recipe 的对象与其原始获取的数据保持一致：
const Recipe = ({ title, calories, image, ingredients }) => {
  return (
    <div className={style.recipe}>
      <h1> {title} </h1>
      <ol>
        {ingredients.map((ingredient) => (
          <ul> {ingredient.text} </ul>
        ))}
      </ol>
      <p> {Math.round(calories)} </p>
      <img className={style.picture} src={image} alt="" />
    </div>
  );
};
  1. 如果您不关心接收到的数据的真实性，您可以在获取时对其进行四舍五入：
          <Recipe
            key={recipe.recipe.label} // cba ge it
            title={recipe.recipe.label}
            calories={Math.round(recipe.recipe.calories)}
            image={recipe.recipe.image}
            ingredients={recipe.recipe.ingredients}
          />
于 2020-12-08T04:09:48.703 回答