javascript - 呈现为未定义，无法完全找出错误

Question

我正在结束一个个人元素并测试任何错误，我修复了大多数错误，但不太清楚如何解决这个问题，它在控制台中输出正确的计数、单位和成分，但似乎输出到网页时不起作用:

8 oz cream cheese, softened 
0.25 tsp garlic powder
undefined tsp dried oregano
undefined tsp dried basil
1 cup parmesan cheese

在 parseIngredients 之前(来自 Web 控制台):

0: "8 ounces cream cheese, softened"
1: "1/4 teaspoon garlic powder"
2: " teaspoon dried oregano"
3: " teaspoon dried parsley"
4: " teaspoon dried basil"
5: "1 cup shredded mozzarella cheese"

我怀疑DOM操作可能出了问题，所以我回去检查了几次都没有找到问题所在。

Recipe.js

    parseIngredients(){
        const unitsLong = ['tablespoons','tablespoon','ounces','ounce','teaspoons','teaspoon','cups','pounds'];
        const unitsShort = ['tbsp','tbsp','oz','oz','tsp','tsp','cup','pound'];
        const units = [...unitsShort,'kg','g'];

        const newIngredients = this.ingredients.map( el=>{

            // uniform units 
            let ingredient = el.toLowerCase();
            unitsLong.forEach((unit,i) =>{
                ingredient = ingredient.replace(unit,unitsShort[i]);
            });

            // remove parentheses
            ingredient = ingredient.replace(/ *\([^)]*\) */g, ' '); // regular expression


            // Parse the ingredient into count, unit and ingredient
            const arrIng = ingredient.split(' ');
            const unitIndex = arrIng.findIndex(el2 => units.includes(el2));// return true or false 


            let objIng; 
            if(unitIndex > -1){
                // there is a unit 
                const arrCount = arrIng.slice(0,unitIndex); // Ex. 4 1/2 cups, arrCount is [4,1/2] & 4 cups, arrCount is [4]

                let count; 
                if(arrCount.length === 1){
                    count = eval(arrIng[0].replace('-','+'));
                } else{
                    count =  eval(arrIng.slice(0,unitIndex).join('+'));
                }

                objIng ={
                    count, 
                    unit:arrIng[unitIndex],
                    ingredient:arrIng.slice(unitIndex +1).join(' ')
                };


            } else if(parseInt(arrIng[0],10)){
                // thre is no unit but 1st element is number 
                objIng ={
                    count:parseInt(arrIng[0],10),
                    unit:'',
                    ingredient:arrIng.slice(1).join(' ')
                }

            }else if(unitIndex === -1){
                // There is no Unit and no number at 1st element 
                objIng ={
                    count:1,
                    unit:'',
                    ingredient
                }
            }


            return objIng; 

        });

        this.ingredients = newIngredients; 
    }
}

更新:感谢社区的所有热心帮助和 Barmar 对问题的出色把握。我做了一些挖掘，发现 food2fork 没有指定配料的数量。所以问题是字符串将有一个单位但没有数量。以下是我的修复，但似乎没有解决“未定义”问题。

                let count; 
                if(arrCount.length === 1){
                    count = eval(arrIng[0].replace('-','+'));
                } else if(arrCount.length === undefined){
                    count = 1; 
                }
                else{
                    count =  eval(arrIng.slice(0,unitIndex).join('+'));
                }

                objIng ={
                    count, 
                    unit:arrIng[unitIndex],
                    ingredient:arrIng.slice(unitIndex +1).join(' ')
                };

我也尝试了以下方法:

arrCount.length === 0 ;
arrCount === null;

仍然，呈现未定义

我是 web-dev 的新手，我真的可以用更有经验的头脑和眼睛来查看这段代码。再次非常感谢所有关注这个问题的人。祝你有美好的一天，编码愉快!!!

更新评论和更新原因:

1. 这道题从debug转为算法题，以后可能对其他人有帮助。

2. 新问题削减了大量不相关的代码。

3. 删除渲染代码，因为后来发现不是问题所在。

Answer 1

我找到了问题的解决方法，请随时引用问题中的代码。在 Recipe.js 和我们决定如何将成分解析为计数、单位和成分的条件语句中:

arrCount.length 将始终等于 1，因为出于某种原因，解析前的成分有一个 '' 并且在 UnitIndex< 之前读取时，它算作一个计数。

因此修复将是:

                let count; 
                if(arrCount.length == 1 && arrCount[0] == 0){
                    count = 1;
                } else if(arrCount.length == 1){
                    count = eval(arrIng[0].replace('-','+'));
                }
                else{
                    count =  eval(arrIng.slice(0,unitIndex).join('+'));
                }

                objIng ={
                    count, 
                    unit:arrIng[unitIndex],
                    ingredient:arrIng.slice(unitIndex +1).join(' ')
                };

最后，感谢 Barmar 不断为我提供解决此问题的新思路。快乐编码@Barmar，谢谢。