javascript - Reactjs 中的 changedropdown 更新数据被延迟

Question

我是 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 年的值更新该值。因此更新值总是延迟。如何在下拉列表发生变化时立即呈现值？

Answer 1

React 的 setState() 是异步的，这意味着如果您想在设置后访问更新的状态，那么您应该使用在状态成功更新时运行的回调。

this.setState({ [name]: parseInt(value) }, () => {
  this.fetchProjectionData(value);
  this.getfirstPQI();
});

如果您不使用回调，则 getfirstPQI() 可能正在读取旧状态。