引用 API 时遇到问题（React 和 Superagent）

Question

因此，通过使用邮递员，我成功地调用了 yummly 的 url。我想呈现我的搜索结果。目前在第 29 - 36 行的渲染中，我有一个虚假的搜索，只是为了确保 Dom 可以正常工作，并且确实可以。如何从第 52 - 60 行获取 api 搜索以显示在 29 - 36 中。

import React from 'react';
import Request from 'superagent';
import _ from 'lodash';


export class Yum extends React.Component {
    constructor(){
        super();
        this.state = {};
    }

    componentWillMount(){

        /*var url = "http://api.yummly.com/v1/api/recipes?_app_id=5129dd16&_app_key=9772f1db10ba433223ad4e765dc2b537&=q"
        Request.get(url).then((response) => {
            console.log(response.body);
            this.setState({
                recipes: response.body.matches,
                total: response.body.totalResults           
            });
        });*/
        this.search();
    }

    updateSearch(){
        this.search(this.refs.query.value);
    }

    render(){
        

        const title = 'Onion Soup';
        const ingredients = ["onions", "beef stock"];
        const listItems = ingredients.map((ingredient) => {
          return (<h5>{ingredient}</h5>);
        });
        
        
        return(
            
            <div>
                <input ref="query" onChange = { (e) => {this.updateSearch();} } type="text" />
                
                <h4>{title}</h4>
                <ul>
                <li>{listItems}</li>
                </ul>
            </div>
        )
    }

    search(query = "onion") {
        var url = `http://api.yummly.com/v1/api/recipes?_app_id=5129dd16&_app_key=9772f1db10ba433223ad4e765dc2b537&=q${query}&maxResult=1`
        Request.get(url).then((response) => {
            console.log(response.body.matches[0]);
            console.log(query);
            this.setState({
                recipes: response.body.matches[0],
                //total: response.body.totalResults
            });
        });
    }
}

export default Yum;

Answer 1

我已经清理了你的代码，请试一试

import React from 'react';
import Request from 'superagent';
import _ from 'lodash';

export class Yum extends React.Component {
    constructor(){
        super();
        this.state = {
            searchQuery: 'onion'
            recipe: {
                ingredients: []
            }
        };

        this.search = this.search.bind(this);
        this.queryUpdate = this.queryUpdate.bind(this);
    }

    componentWillMount(){
        this.search(this.state.searchQuery);
    }

    render(){
        const title = 'Onion Soup'; // Get this from somwhere else ?
        const {recipe, searchQuery} = this.state; // Get state properties

        const listItems = _.get(recipe, 'ingredients', []).map((ingredient) => {
            return (<h5>{ingredient}</h5>);
        });

        return(
            <div>
                <input onChange={this.queryUpdate} type="text" value={searchQuery} />

                <h4>{title}</h4>
                <ul>
                    <li>{listItems}</li>
                </ul>
            </div>
        )
    }

    queryUpdate(e) {
        const searchQuery = event.target.value; // Get new value from DOM event
        this.setState({searchQuery}); // Save to state
        this.search(searchQuery); // Search
    }

    search(searchQuery) {
        const url = `http://api.yummly.com/v1/api/recipes?_app_id=5129dd16&_app_key=9772f1db10ba433223ad4e765dc2b537&q=${searchQuery}&maxResult=1`
        Request.get(url).then((response) => {
            this.setState({
                recipe: response.body.matches[0]
            });
        });
    }
}

export default Yum;

以下是我注意到的一些问题：

• URL 中的拼写错误：=q 而不是 q=
• 您应该将文本输入的状态保存在状态变量中，而不是使用 refs
• 代码中注释的小细节