无法读取未定义的React JS的属性'concat'

时间:2018-09-06 16:26:10

标签: javascript reactjs react-state-management

尝试在此组件的状态内将对象添加到数组中,无法在没有“属性未定义”错误的情况下将新对象连接到数组。

我已经能够使它在带有数组的“浅”状态下工作,但是我想拥有它,更希望在单独的数组中使用它。

状态

    constructor(props) {
      super(props);
        this.state = {
          show: false,
          id: null,
          name: 'New Task',
          timerOn: false,
          seconds: 0,
          minutes:0,
          hours:0,
          complete: {
            todayId: null,
            list: []
          }
        }
      }

更新状态,复制“控件”(分钟,秒钟,开始等)的方法,将状态重置为初始值,并获取状态的副本并将其应用于数组:

    completeTaskHandler = () => {
      if (this.state.seconds === 0 && this.state.minutes === 0 && this.state.hours === 0) {
        alert('Please Provide a name');
      }
      else {
        const end = new Date();
        let finishedTask = new Object ({
          start: this.state.id,
          end: end,
          name: this.state.name,
          seconds: this.state.seconds,
          minutes: this.state.minutes,
          hours: this.state.hours,});

        this.setState((prevState,props) => {
          return {
            start: null,
            show: false,
            id: null,
            name: 'task',
            timerOn: false,
            seconds: 0,
            minutes:0,
            hours:0,
            complete: prevState.complete.list.concat(finishedTask)
          }
        });
        clearInterval(this.interval);
      }
    }

1 个答案:

答案 0 :(得分:1)

您正在对数组进行连接。由于list是一个数组。

使用先前状态将新值推送到数组。检查以下解决方案以更好地了解

  this.setState((prevState,props) => {
      return {
        start: null,
        show: false,
        id: null,
        name: 'task',
        timerOn: false,
        seconds: 0,
        minutes:0,
        hours:0,
        complete: [...prevState.complete.list, finishedTask]
      }
    });