控制台报ReferenceError: r未定义，parseIngredients()功能无法验证

Let's break down your issues one by one, with practical fixes:

Why window.r is throwing a ReferenceError? #

The line window.r = state.recipe lives inside the controlRecipe function, which only runs when two specific events trigger:

• The URL hash changes (e.g., you click a recipe link that adds #recipe-id to the URL)
• The page loads with a hash already present in the URL

If neither event fires (like loading the page normally without a hash, or not clicking any recipe result), controlRecipe never runs—so window.r is never assigned, hence the error when you try to call r.parseIngredients().

Quick Ways to Access r #

1. Trigger the hash change via UI:

   • Your test code runs controlSearch() on load, so you’ll see pizza recipe results right away
   • Click any recipe result—this adds the recipe’s ID to the URL hash, triggers controlRecipe, and sets window.r
   • Now you can run r.parseIngredients() in the console without errors

2. Force controlRecipe to run with a test ID:
   If you want to test without clicking a recipe, paste this into your console (replace the ID with a valid one from your search results):

   controlRecipe('47746'); // Use a real recipe ID from your search results
   r.parseIngredients(); // Now this works!
   

Fixing the parseIngredients() Logic #

Even once r is defined, your method has a bug that will return undefined for ingredients with units (like "4 tablespoons")—you forgot to assign objIng in that case! Here's the corrected version:

parseIngredients() {
    const unitsLong = ['tablespoons', 'tablespoon', 'ounces', 'ounce', 'teaspoons', 'teaspoon', 'cups', 'pounds'];
    const unitsShort = ['tbsp', 'tbsp', 'oz', 'oz', 'tsp', 'tsp', 'cup', 'pound'];
    const newIngredients = this.ingredients.map(el => {
        // 1) Uniform units
        let ingredient = el.toLowerCase();
        unitsLong.forEach((unit, i) => {
            ingredient = ingredient.replace(unit, unitsShort[i]);
        });
        // 2) Remove parentheses
        ingredient = ingredient.replace(/ *\([^)]*\) */g, ' ')
        // 3) Parse ingredients into count, unit and ingredient
        const arrIng = ingredient.split(' ');
        const unitIndex = arrIng.findIndex(el2 => unitsLong.includes(el2));
        let objIng;
        if (unitIndex > -1) {
            // There is a unit
            const arrCount = arrIng.slice(0, unitIndex);
            let count;
            if (arrCount.length === 1) {
                count = arrIng[0];
            } else {
                count = eval(arrIng.slice(0, unitIndex).join('+'));
            }
            // ✅ Missing assignment added here
            objIng = {
                count: parseFloat(count),
                unit: unitsShort[unitsLong.indexOf(arrIng[unitIndex])],
                ingredient: arrIng.slice(unitIndex + 1).join(' ')
            };
        } else if (parseInt(arrIng[0], 10)) {
            // No unit, but first element is a number
            objIng = {
                count: parseInt(arrIng[0], 10),
                unit: '',
                ingredient: arrIng.slice(1).join(' ')
            }
        } else {
            // No unit and no number in first position
            objIng = {
                count: 1,
                unit: '',
                ingredient
            }
        }
        return objIng;
    });
    this.ingredients = newIngredients;
}

Key fixes:

• Added objIng assignment for ingredients with units, mapping long units to their short abbreviations
• Converted count to a float to handle fractional amounts (like "1/2")

After applying this fix, r.parseIngredients() will correctly convert "4 tablespoons" to "4 tbsp" and structure all ingredients into consistent objects with count, unit, and ingredient properties.

内容的提问来源于stack exchange，提问作者Jagordyn