如何使用 toFixed() 方法

Question

想问一下toFixed()方法及其用法。我有一个名为卡路里的常量，它是一个数字数据，我想将它四舍五入为小数点后两位的数字。

const recipe = this.state.activeRecipe;
const calories = recipe.calories.toFixed(2);
console.log(calories);

我收到一条错误消息 Uncaught TypeError: Cannot read property 'toFixed' of undefined

任何人都知道如何解决这个问题，或者是否有任何我可以使用的方法？谢谢！

全部代码：

import React, { Component } from "react";

class Recipe extends Component {
    state = {
        activeRecipe: []
    }
    componentDidMount = async() => {
        const title = this.props.location.state.recipe;
        const req = await fetch
        (`https://api.edamam.com/search?q=${title}&app_id=${API_ID}&app_key=${API_KEY}`);

        const res = await req.json();
        this.setState({ activeRecipe: res.hits[0].recipe});
        console.log(this.state.activeRecipe);
        }
        render() {
            const recipe = this.state.activeRecipe;
            const calories = recipe.calories.toFixed(2);
            console.log(calories);
            return (
               <div className="container">
                       <h3 className="active-recipe">{recipe.label}</h3>
                       <div className="container">
                       {recipe.ingredients && recipe.ingredients.map(ingredient => {
                        return (
                            <p>{ingredient.text}</p>

                        );
                       })}
                       </div>
               </div>
            );
        }
}

export default Recipe;

Answer 1

这是一个很常见的问题。 render 第一次运行时，this.state.activeRecipe.calories 将为空，因为 fetch 调用尚未返回。因此，如果 this.state.activeRecipe.calories 存在，您需要通过仅调用 toFixed 来在 render 函数中说明这一点：

const recipe = this.state.activeRecipe;
const calories = recipe.calories ? recipe.calories.toFixed(2) : null;

请注意，在这种情况下，您还需要调整 render 函数返回的内容，即，如果 this.state.activeRecipe 为空，您需要知道该怎么做。

如何使用 toFixed() 方法

How to use toFixed() method

javascript

tofixed