时间戳

首页 > 解决方案 > 如何在反应中映射来自 API 的响应

reactjs - 如何在反应中映射来自 API 的响应

问题描述

我确实从 NYTimes API 获取数据，并在浏览器中控制台记录响应。我通过编写一个函数 do_search 来做到这一点。如何将响应作为道具发送到另一个组件？


这是 API 的响应。 在此处输入图像描述


这是我的 INDEX.JS 代码。请注意，我想在 Listview 组件中传递道具，该组件位于最后一排的第 6 行。

import React from "react";
import ReactDOM from "react-dom";
import SearchComponent from "./components/Search_component";
import ListViewComponent from "./components/Listview_component";
import _ from "lodash";
const axios = require("axios");
const api_key = "my_api_key";
let url = "https://api.nytimes.com/svc/search/v2/articlesearch.json";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            q: " "
        };
        this.do_search("Bangladesh");
        this.do_search = this.do_search.bind(this);
    }

    do_search(keyword) {
        axios
            .get(
                url, // takes the variable url
                {
                    params: {
                        api_key: api_key,
                        q: keyword
                    }
                }
            )
            .then(function(response) {
                console.log(response);
            })
            .catch(function(error) {
                console.log(error);
            });
    }

    render() {
        const search_throttle = _.debounce(keyword => {
            this.do_search(keyword);
        }, 500);

        return (
            <div>
                <SearchComponent
                    searchkeyword={
                        search_throttle
                    }
                />
                <ListViewComponent data={this.do_search.response.docs} />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

标签： reactjs

解决方案

创建一个数组，您将从 axios 中的 then 方法推送 response.data。将该数组作为道具传递给 ListView 组件。

在 ListView 组件内部制作一些加载器，向用户显示该组件正在获取数据。数据到达时，显示您从 NYTimes API 获得的信息

推荐阅读