反应状态没有改变

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({&nbsp; studentID: value}, this.createMonthlyChart)

Answer 2

我看到一些事情该选项应具有值<option key={student.id} value={student.id}> {student.name}</option>createMonthlyChart，应在更新状态后调用（第二个参数）你应该使用event.target.valuehandleOnChange = event => {&nbsp; this.setState({&nbsp; &nbsp; studentID: event.target.value,&nbsp; }, this.createMonthlyChart);};第一次，您可以使用componentDidMountcomponentDidMount() {&nbsp; this.createMonthlyChart();}并且不要忘记用第一个学生初始化状态，像这样this.state = {&nbsp; studentID: students[0].id,};