Tôi đang cố gắng kéo dữ liệu từ Dữ liệu mở để đưa ra một bản đồ nhiệt nhanh. Trong quá trình tôi muốn thêm một số số liệu thống kê. Hầu như mọi thứ đều chạy tốt trong đó tôi có dữ liệu và có thể hiển thị bản đồ, nhưng tôi không chắc chắn làm thế nào để xử lý các tính toán một khi tôi nhận được dữ liệu vì phải mất thời gian để dữ liệu vào. Làm cách nào để thiết lập mọi thứ Tôi có thể chạy một hàm trên một biến trạng thái nếu nó chưa nhất thiết phải nhận dữ liệu? Hiện tại tôi đang nhận được một số không là số được chuyển làm đạo cụ cho StatCard.
Dưới đây là những nỗ lực của tôi:
App.js
import React, { Component } from 'react';
import Leaf from './Leaf';
import Dates from './Dates';
import StatCard from './StatCard';
import classes from './app.module.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
data:[],
cleanData:[],
dateInput: '2019-10-01',
loading: false,
totalInspections: null,
calculate: false
};
}
componentDidMount() {
try {
this.fetchData();
} catch (err) {
console.log(err);
this.setState({
loading: false
})
}
}
fetchData=()=>{
const requestData = async () => {
await fetch(`https://data.cityofnewyork.us/resource/p937-wjvj.json?$where=latitude > 39 AND latitude< 45 AND inspection_date >= '${this.state.dateInput}'&$limit=50000`)
.then(res => res.json())
.then(res =>
//console.log(res)
this.setState({ data: res, loading: true})
)
}
const calculateInspections = () => {
this.setState({totalInspections: this.state.data.length})
}
//call the function
requestData();
if(this.state.data) {
calculateInspections();
}
}
handleDateInput = (e) => {
console.log(e.target.value);
this.setState({dateInput:e.target.value, loading: false}) //update state with the new date value
this.updateData();
//this.processGraph(e.target.value)
}
updateData =() => {
this.fetchData();
}
LoadingMessage=()=> {
return (
<div className={classes.splash_screen}>
<div className={classes.loader}></div>
</div>
);
}
//inspection_date >= '${this.state.dateInput}'&
// https://data.cityofnewyork.us/resource/p937-wjvj.json?$where=inspection_date >= '2019-10-10T12:00:00'
render() {
return (
<div>
<div>{!this.state.loading ?
this.LoadingMessage() :
<div></div>}
</div>
{this.state.totalInspections && <StatCard totalInspections={this.state.totalInspections} /> }
<Dates handleDateInput={this.handleDateInput}/>
<Leaf data={this.state.data} />
</div>
);
}
}
export default App;StatCard.js
import React from 'react';
const StatCard = ( props ) => {
return (
<div >
{ `Total Inspections: ${props.totalInspections}`}
</div>
)
};
export default StatCard;Cố gắng sửa chữa
componentDidMount() {
try {
this.fetchData();
} catch (err) {
console.log(err);
this.setState({
loading: false
})
}
}
componentDidUpdate () {
if(this.state.data) {
this.setState({totalInspections: this.state.data.length})
}
}
fetchData= async ()=>{
const requestData = () => {
fetch(`https://data.cityofnewyork.us/resource/p937-wjvj.json?$where=latitude > 39 AND latitude< 45 AND inspection_date >= '${this.state.dateInput}'&$limit=50000`)
.then(res => res.json())
.then(res =>
//console.log(res)
this.setState({ data: res, loading: true})
)
}
//call the function
await requestData();
}
vâng, đó là một lỗi đánh máy
—
LoF10
Bạn có chắc chắn việc sử dụng các tham số truy vấn tương ứng với tài liệu API không?
—
Jurrian
Có, như bạn có thể thấy trong mã dữ liệu được tìm nạp, đó không phải là vấn đề. Tôi có dữ liệu. Vấn đề là tôi không chắc chắn nên chạy tính toán ở đâu và khi nào vì nó cần chạy khi tôi đã nhận được tất cả dữ liệu API và sau đó được chuyển làm đạo cụ cho statCard.
—
LoF10
Vui lòng gửi cho tôi liên kết
—
mã và hộp
this.setState({ data: res, loading: true})một lỗi đánh máy trongrequestDatachức năng? không nênloadingđược đặt thànhfalsekhi dữ liệu được tìm nạp?