时间戳

首页 > 解决方案 > setState 不更新 React Js 中的数组状态

javascript - setState 不更新 React Js 中的数组状态

问题描述

我尝试从输入中获取值并将其放入对象中，然后推送到新数组。然后将这个数组（带 setState）与我的状态数组结合起来。但是，我的状态数组值总是返回空。能否请您说错误在哪里。谢谢。

class AddExtraSeassion extends Component {
  constructor(props) {
    super(props);

    this.checkValidity = this.checkValidity.bind(this);
    this.onChangeDate = this.onChangeDate.bind(this);
    this.onChangeTime = this.onChangeTime.bind(this);
    this.onChangeDuration = this.onChangeDuration.bind(this);

    this.state = {
      checkedStudentLength: 0,
      validity: false,
      seassionDuration: null,
      seassionDate: null,
      seassionTime: null,
      showSeassion: false,
      seassions: []

    }
  }


  addSeassion = () => {
    this.setState({showSeassion: true});
  }

  onChangeDate = (event) => {
    this.setState({seassionDate: event.target.value});
  };
  onChangeTime = (event) => {
    this.setState({seassionTime: event.target.value});
  };
  onChangeDuration = (event) => {
    this.setState({seassionDuration: event.target.value});
  };

  checkValidity() {
    const seassionDate = this.state.seassionDate;
    const seassionTime = this.state.seassionTime;
    const seassionDuration = this.state.seassionDuration;

    const obj = {
      "Date": seassionDate,
      "Time": seassionTime,
      "Duration": seassionDuration
    };
    let SeassionList=[];

    SeassionList.push(obj);
    console.log(JSON.stringify(SeassionList) + " SeassionList array"); // print result
    this.setState({
      seassions: [...this.state.seassions, SeassionList]
    })
    console.log(JSON.stringify(this.state.seassions) + " state array"); // always empty

标签： javascriptreactjsreact-component

解决方案

正如@norbitrial 提到的 setState 是异步操作，所以 console.log() 不会显示更新后的状态。如果要检查状态是否正在更新，可以使用 setState 方法提供的回调，如下所示：

this.setState(prevState => ({
      seassions: [...prevState.seassions, SeassionList[0]]
    }),() => {
    console.log(this.state.seassions);
})

推荐阅读