反应 state 不变

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 state，您可以直接调用 this.createMonthlyChart 将值作为参数传递给 function。 但是，如果您出于其他原因需要它，您可以调用 function 作为 setState 的回调，如下所示：

this.setState({
  studentID: value
}, this.createMonthlyChart)

Answer 2

我看到了几件事

该选项应该具有价值

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

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

你应该使用event.target.value

handleOnChange = event => {
  this.setState({
    studentID: event.target.value,
  }, this.createMonthlyChart);
};

第一次，您可以使用componentDidMount

componentDidMount() {
  this.createMonthlyChart();
}

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

this.state = {
  studentID: students[0].id,
};