我是ReactJS的新手。我创建了一个在componentWillMount()内部调用的服务,因为我希望在页面加载后立即获得数据。
现在,我想在下拉菜单更改时使用相同的服务,并使用新值进行更新。
我在onChangeDropDown()内部调用了该服务,但似乎更新后的值未正确呈现。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import config from '../../../../config';
import {
Container, Divider, Accordion, Icon, Transition, Label, Table
} from 'semantic-ui-react';
import Utilities, { Button, PtInput, PtInputShort, PtInputIcon, PtSelect, PtDateInput, PtInputConditionTab, PtInputNextToEachOther } from '../../../../grit-utilities';
import ScrollArea from 'react-scrollbar';
export default class Future extends Component {
constructor(props) {
super(props);
this.state = {
...this.props.futureModel.pavementcondition,
selectedYear: new Date().getFullYear(),
PQI: 'N.A.',
Age: 'N.A.',
Aadt: 'N.A.',
Esals: 'N.A.',
CumEsals: 'N.A.',
pqiArray: []
};
}
getYearOptions = () => {
const yearOptions = [];
for (let i = 0; i < 35; i++) {
yearOptions.push({ key: new Date().getFullYear() + i, value: new Date().getFullYear() + i, label: new Date().getFullYear() + i});
}
return yearOptions;
}
fetchProjectionData = (selectedYear) => {
axios.get(`${config.server}\\fetchFutureData\\${this.props.futureModel.route.id}\\${selectedYear}`).
then((res) => {
if (res.data.result[0]) {
let data = res.data.result[0];
this.setState({
//PQI: data.PSR,
Age: data.Age,
Esals: data.Esals,
Aadt: data.AADT,
CumEsals: data.CumEsal
});
}
});
}
render() {
const yearOptions = this.getYearOptions();
return (
<Container>
<ScrollArea
speed={1}
className={!window.mobileAndTabletcheck() ? "area_desktop" : "area_mobile"}
contentClassName="content"
smoothScrolling={true}>
<PtSelect name="selectedYear" defaultVal={this.state.selectedYear} label="Select Year" options={yearOptions} onChange={this.onChangeDropdown.bind(this)} />
<PtInput disabled placeholder="Not Available" name="PQI" value={this.state.PQI ? this.state.PQI:''} label="PQI - Pavement Quality Index" disabled name="PQI" />
<PtInput disabled placeholder="Not Available" name="Age" value={this.state.Age ? this.state.Age:''} label="Age" disabled name="Age" />
<PtInput disabled placeholder="Not Available" name="Aadt" value={this.state.Aadt ? Math.round(this.state.Aadt) : ''} label="AADT" disabled name="AADT" />
<PtInput disabled placeholder="Not Available" name="Esals" value={this.state.Esals ? Math.round(this.state.Esals):''} label="ESALs" disabled name="ESALs" />
<PtInput disabled placeholder="Not Available" name="CumEsals" value={this.state.CumEsals ? Math.round(this.state.CumEsals) : ''} label="Cumulative ESALs" disabled name="CumESALs" />
</ScrollArea>
</Container>
);
}
/* This function actually gets the PQI value for the current year based on routeId and year from FutureTabView hard table
Date: 09/25/2019
*/
getfirstPQI = () =>{
fetch(`${config.server}/getfirstpqi/`+this.props.futureModel.route.id+`/`+this.state.selectedYear)
.then(response=>response.json())
.then(data=>{
//console.log(data[0]['PSR'])
this.setState({PQI:data[0]['PSR']})
})
}
onChangeDropdown = (e) => {
const { target } = e;
const { name, value } = target;
this.setState({ [name]: parseInt(value) });
this.fetchProjectionData(value);
this.getfirstPQI();
}
componentDidMount() {
this.fetchProjectionData(this.state.selectedYear);
this.getfirstPQI();
}
}
我已经完成了这段代码,并且我试图在页面加载后立即执行的操作应显示从服务接收到的值。示例:当前年份为2019,页面加载后立即呈现2019年的值。现在我有几年的下拉列表。因此,当我选择2020时,值不会更新,而当我选择2021时,它将值更新为2020。因此,更新值始终在延迟。下拉菜单更改后如何立即呈现值?
最佳答案
React的setState()
是异步的,这意味着如果要在设置状态后访问更新后的状态,则应使用状态成功更新后运行的回调。
this.setState({ [name]: parseInt(value) }, () => {
this.fetchProjectionData(value);
this.getfirstPQI();
});
如果不使用回调,则
getfirstPQI()
可能正在读取旧状态。