如何将食谱转换为每份热量

Question

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

现在，我的浏览器中的组件，Chrome Developer工具，看起来是这样的：道具

{
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>

RECIPE.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;

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

Answer 1

您有两个选项：

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>
);
};

2. 如果您不关心接收到的数据的诚实性，您可以在提取时对其进行四舍五入：

<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}
/>