反应状态没有改变

Question

我有一个像这样的反应组件：const students: [  {id: '', name: '', age: '', attendance: ''}  //... 1000 entries]class Students extends React.Component {  constructor (props) {    super(props)    this.state = {      studentID: 1    }  }  createMonthlyChart = () => {    const { studentID } = this.state    let computeScore = students.attendance.map (      item => {        //... get attendance by id      }    )    return chartData  }  handleOnChange = value => {    console.log(value) // student key    this.setState({      studentID: value    })    this.createMonthlyChart() // not working  }  render () {    return (      <div>        // ant design component        <Select          defaultValue={type}          onChange={this.handleOnChange}        >        students.map((student, key) => (          <Option key={student.id}> {student.name} </Option>        ))        </Select>      </div>    )  }}这是唯一的想法我不确定我是否错误地使用了 setState 但不知何故我得到了意想不到的价值例如，我第一次点击学生时，即使数据在那里，我也没有得到任何图表可视化，我必须第二次按下它才能获得任何图表。如果我在没有任何出席的情况下点击学生，之后我会得到所有学生的空图表。我必须刷新页面才能重新启动

Answer 1

对我来说，您似乎根本不需要 studentID 状态，您可以直接调用 this.createMonthlyChart 将值作为参数传递给函数。但是，如果您出于其他原因需要它，您可以调用该函数作为对 setState 的回调，如下所示：

this.setState({

  studentID: value

}, this.createMonthlyChart)

Answer 2

我看到一些事情

该选项应具有值

<option key={student.id} value={student.id}> {student.name}</option>

createMonthlyChart，应在更新状态后调用（第二个参数）

你应该使用event.target.value

handleOnChange = event => {

  this.setState({

    studentID: event.target.value,

  }, this.createMonthlyChart);

};

第一次，您可以使用componentDidMount

componentDidMount() {

  this.createMonthlyChart();

}

并且不要忘记用第一个学生初始化状态，像这样

this.state = {

  studentID: students[0].id,

};