javascript - this.setState 不改变状态值

Question

ageVSpqiYearPick是一个变量，它决定选择哪个背景层（函数selectBackgroundLayer()）。ageVSpqiYearPick选择菜单项时设置。使用当前代码，变量不会被更改setState。console.log是：

'选择背景层：，2021'

this.state = {   //in constructor
  ageVSpqiYearPick: ''  
};

<MenuItem  //these menu items are located in render method
  key="Age"
  text="Age"
  onClick={() => {
    this.props.selectBackgroundLayer('Age');
    this.setState({ ageVSpqiYearPick: "Age" });
    console.log("Setting AGE"); 
  }}
/>

<MenuItem
  key="PSR"
  text="PQI - Pavement Quality Index"
  onClick={() => {
    this.setState({ ageVSpqiYearPick: 'getPQI' }, () => { this.props.selectBackgroundLayer('getPQI'); });
    console.log("Setting PQI");
  }}
/>
//this is a handling function for a dropdown selector for changing the year
onChangeDropdownPQI = (e) => {  
  const { target } = e;  
  const { name, value } = target;

  console.log("selectBackgroundLayer: " + this.state.ageVSpqiYearPick + " ," + value);
  this.selectBackgroundLayer(this.state.ageVSpqiYearPick,value); 
}

标签： javascriptreactjs

Answer 1

更改onClick为onSelect

<MenuItem key="Age" text="Age"
                    onSelect={() => { this.props.selectBackgroundLayer('Age');  this.setState({ ageVSpqiYearPick: "Age" }); console.log("Setting AGE"); }} />

<MenuItem key="PSR" text="PQI - Pavement Quality Index"
                    onSelect={() => { this.setState({ ageVSpqiYearPick: 'getPQI' }, () => { this.props.selectBackgroundLayer('getPQI'); }); console.log("Setting PQI");} } />