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

Question

我尝试从输入中获取值并将其放入对象然后推送到新数组。然后将这个数组（使用 setState）与我的状态数组结合起来。但是，我的状态数组值总是 returns 为空。能不能说一下错在哪里。谢谢

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

Answer 1

首先，您不应期望在使用 setState() 后立即看到 console.log() 行中的更改，因为它是异步操作。

您也可以尝试使用数组的先前状态并传递 obj 而不是 SeassionList:

this.setState(prevState => ({
   ...prevState,
   seassions: [...prevState.seassions, obj]
}))

Answer 2

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

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

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

setState does not update array state in React Js

javascript

reactjs

react-component