Я пытаюсь получить значение из ввода и поместить его в объект, а затем нажать на новый массив. Затем объедините этот массив (с 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
0
Elchin Farhadov 29 Авг 2020 в 17:40

2 ответа

Лучший ответ

Поскольку @norbitrial упомянул, что setState является асинхронной операцией, поэтому console.log () не будет отображать обновленное состояние. Если вы хотите проверить, обновляется ли состояние или нет, вы можете использовать обратный вызов, предоставляемый методом setState, как показано ниже:

this.setState(prevState => ({
      seassions: [...prevState.seassions, SeassionList[0]]
    }),() => {
    console.log(this.state.seassions);
})
0
Harmandeep Singh Kalsi 30 Авг 2020 в 05:58

Во-первых, вы не должны ожидать увидеть изменения в этой строке console.log() сразу после использования setState(), потому что это асинхронное действие.

Также вы можете попробовать использовать предыдущее состояние вашего массива и передать obj вместо SeassionList:

this.setState(prevState => ({
   ...prevState,
   seassions: [...prevState.seassions, obj]
}))
0
norbitrial 29 Авг 2020 в 14:45