渲染為未定義，無法完全找出錯誤

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開發的新手，我真的可以用更有經驗的頭腦和眼神看一下這段代碼。 再次非常感謝所有關注此問題的人們。 祝您有美好的一天，並祝您編程愉快！

更新的評論和更新原因：

1. 該問題從調試到算法問題，可能在將來有所幫助。

2. 新問題削減了大量無關的代碼。

3. 刪除渲染代碼，因為以后發現不是問題。

Answer 1

我找到了解決問題的方法，可以隨時參考問題中的代碼。 在Recipe.js和關於如何決定將成分解析為計數，單位和成分的條件語句中：

arrCount.length將始終等於1，因為出於某些原因，解析之前的成分具有''並且在UnitIndex之前讀取時，它將計為一個count 。

因此，解決方法將是：

                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，祝您編碼愉快，謝謝。