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,
};

反应状态不变

2 个答案: