javascript - 为什么从index.js中的r.GetRecipe（）方法输入的数据不会传递到Recipe.js中的getRecipe（）中？(Why won't data inputted from my r.GetRecipe() method in index.js pass into getRecipe() in Recipe.js?)

Question

I would expect the '54454' number from index.JS to pass into {this.id} in Recipe.js, but it comes back as undefined and I'm not sure why.

(我希望index.JS中的“ 54454”数字传递到Recipe.js中的{this.id}中，但它以未定义形式返回，我不确定为什么。)

Any thoughts would be greatly appreciated.

(任何想法将不胜感激。)

If I hard code the number into the URL, then it will work, it's just when I enter the number into r.getRecipe(), it's not showing up in {this.id} in the Recipe.js file.

(如果我将数字硬编码到URL中，那么它将起作用，只是当我将数字输入r.getRecipe（）时，它并没有显示在Recipe.js文件的{this.id}中。)

I'm not sure why that's happening or what I'm doing wrong here.

(我不确定为什么会这样或我在做什么错。)

In the console, the rId value is showing as undefined.

(在控制台中，rId值显示为未定义。)

Recipe.JS

(食谱)

import axios from 'axios';
import { proxy } from '../config';

export default class Recipe {
    constructor(id) {
        this.id = id;
    }

    async getRecipe() {
        try {
            const res = await axios(`${proxy}https://recipesapi.herokuapp.com/api/get?rId=${this.id}`);
            console.log(res);
        } catch (error) {
            console.log(error);
            alert('Something went wrong :(');
        }
    }
}

index.js:

(index.js：)

import Search from './models/Search';
import Recipe from './models/Recipe';
import * as searchView from './views/searchView';
import { elements, renderLoader, clearLoader } from './views/base';

/* Global state of the app
* - Search object
* - Current recipe object
* - Shopping list object
* - Liked recipes
*/
const state = {};

//********************
//SEARCH CONTROLLER***
//********************

const ControlSearch = async () => {
    // 1) Get the query from the view
    const query = searchView.getInput();
    console.log(query) //TODO

    if (query) {
        // 2) New search object and add it to the state
        state.search = new Search(query);

        // 3) Perpare UI for results
        searchView.clearInput();
        searchView.clearResults();
        renderLoader(elements.searchRes);

        // 4) Search for recipes
        await state.search.getResults();

        // 5) Reunder the results on the UI
        clearLoader();
        searchView.renderResults(state.search.result);
        //console.log(search)
    }
}

elements.searchForm.addEventListener('submit', e => {
    e.preventDefault();
    ControlSearch();
});

elements.searchResPages.addEventListener('click', e => {
    const btn = e.target.closest('.btn-inline');
    if (btn) {
        const goToPage = parseInt(btn.dataset.goto, 10);
        searchView.clearResults();
        searchView.renderResults(state.search.result, goToPage);

    };
});

//********************
//RECIPE CONTROLLER***
//********************

const r = new Recipe;
r.getRecipe(54454);

  ask by Gaston translate from so

Answer 1

等待大神答复