如何从API获取React JS组件中多个项目的数据

Question

我正在尝试从我的React JS组件中的API获取数据。 链接到API 。 该API将填充每辆车的数量。 最后一个参数“ audi”对应于车辆品牌名称。 我需要获取用于64种不同车辆的数据并创建动态列表项（li），但不知道该怎么做。 除fetchCount函数外，其他所有东西都在工作。

这是从“ ../shared/vehicle_make_and_models”导入的车辆数据的示例，共有64个保养项目。

const veh_data = [
{ "alfa-romeo": ["145", "90", "Alfa 6", "Alfasud"] },
{ "aston-martin": ["15", "2-Litre", "AM Vantage", "Atom", "Cygnet", "DB2"]},
{ "audi": ["100", "200", "A1", "A2", "A3", "A4", "A5", "A6", "A7"] }
];

这是我的代码：

import React, { Component } from 'react';
import { veh_data } from '../shared/vehicle_make_and_models'

class ShopByMake extends Component {
constructor(props) {
    super(props);

    this.fetchCount = this.fetchCount.bind(this);

    this.state = {
        veh_data: veh_data,
    };
}

fetchCount(make) {

    fetch('https://mysterious-journey-51969.herokuapp.com/api/vehicle-make-count/' + make)
            .then(response => {
                return response.json();
            })
            .then(data => {
            let firstKey = Object.keys(data)[0],
                count = data[firstKey];
            console.log('make count' + count);
            return count;
        })
        .catch(err => console.log(err)); 
  }

render() {

    const vehicles = this.state.veh_data.reduce((acc, veh) => {
        let make = Object.keys(veh)[0]

        return {
            makes: [
                ...acc.makes,
                <li className="mt-2"><a href="#"><img src={require('../assets/images/audi-logo.jpg')} className="img-fluid logos" /><span className="ml-4 list-text">{make} ({this.fetchCount(make)})</span></a></li>
            ]
        };
    }, { makes: [] });

    return (
        <div>
            <div className="headings-div text-center text-white mt-4 mt-lg-0"><h5 className="headings">Shop By Make</h5></div>
            <div className="mt-3" id="shopbymake">
                <ul className="list-unstyled">
                    {vehicles.makes}
                </ul>
            </div>
        </div>
    );
}
}

export default ShopByMake;

Answer 1

1. 要同时执行请求，可以使用Promise.all() 。

2. 完成所有请求后，过滤掉所有null响应veh_data_with_count.filter(res=> res)

3. 使用setState()在State Object上分配veh_data_with_count属性，以将这些更改通知React，并在必要时允许它更新DOM。

 import React, { Component } from "react"; import axios from "axios"; // import { veh_data } from '../shared/vehicle_make_and_models' const veh_data = [ { "alfa-romeo": ["145", "90", "Alfa 6", "Alfasud"] }, { "aston-martin": ["15", "2-Litre", "AM Vantage", "Atom", "Cygnet", "DB2"] }, { audi: ["100", "200", "A1", "A2", "A3", "A4", "A5", "A6", "A7"] } ]; class ShopByMake extends Component { constructor(props) { super(props); // this.fetchCount = this.fetchCount.bind(this); this.state = { veh_data_with_count: [] }; } componentDidMount() { Promise.all( veh_data.map(async car => { let make = Object.keys(car)[0]; let res = await axios .get( "https://mysterious-journey-51969.herokuapp.com/api/vehicle-make-count/" + make.split('-').join('') ) .catch(err => console.log(err)); if (!res || !res.data) return null; let firstKey = Object.keys(res.data)[0], count = res.data[firstKey]; return { make, count }; }) ) .then(veh_data_with_count => { let removeFails = veh_data_with_count.filter(res=> res) this.setState({ veh_data_with_count: removeFails }); }) .catch(err => console.log(err)); } render() { const vehicles = this.state.veh_data_with_count.map( ({ make, count }, i) => { return ( <li key={i} className="mt-2"> <a href="#"> <img src="" className="img-fluid logos" /> <span onClick={() => this.fetchCount(make)} className="ml-4 list-text" > {make} {count} </span> </a> </li> ); } ); return ( <div> <div className="headings-div text-center text-white mt-4 mt-lg-0"> <h5 className="headings">Shop By Make</h5> </div> <div className="mt-3" id="shopbymake"> <ul className="list-unstyled">{vehicles}</ul> </div> </div> ); } } export default ShopByMake; 

https://codesandbox.io/s/lryq5lvn4q?moduleview=1

Answer 2

您可以创建一个API，该API将返回所有vehicle_make_name的计数，然后根据需要填充该数据。