我正在尝试从我的React JS组件中的API获取数据。 Link to 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;
答案 0 :(得分:2)
要同时执行请求,可以使用Promise.all()
。
所有请求完成后,过滤掉任何null
响应veh_data_with_count.filter(res=> res)
使用veh_data_with_count
在State
对象上分配setState()
属性,以将这些更改通知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;
答案 1 :(得分:0)
您可以创建一个API,该API将返回所有vehicle_make_name的计数,然后根据需要填充该数据。