我是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()可能正在读取旧状态。

10-01 20:05
查看更多