Question

大家。我在使用yummly api获取搜索结果时遇到问题。这是我的代码块。 ..

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           
        });
    });
}

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

render(){
    var recipes = _.map(this.state.recipes, (recipes) => {
        return<li>hello</li>;
    });

    return(

        <div>
            <input ref="query" onChange = { (e) => {this.updateSearch();} } type="text" />
            <ul>{}</ul>

        </div>
    )
}

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

export default Yum;

我想我已接近答案了。我认为这是一个范围问题。所有显示的都是搜索栏，结果不会呈现。如您所见，console.logs正在显示结果。而且我收到一条警告说'第30行：'食谱'被指定了一个值，但从未使用过。'

Api与Reactjs和Superagent集成

0 个答案: