indexOf js первый раз отрабатывает, второй выдает ошибку Cannot read property 'indexOf' of undefined


const day = new  Date().toLocaleDateString();
const inialState = {
    tasks: [
        [{nameTask: "Первая задача", dateTask: "12.12.2020", startAt: "08:50"},{nameTask: "Второя задача", dateTask: "12.12.2020", startAt: "08:20"},{nameTask: "Третья задача", dateTask: "12.12.2020", startAt: "08:40"}],
        ],
    today: day,
    days: ['12.12.2020']
}


export default function (state = inialState, action){
    switch(action.type){
        case 'addTask':
            const nameInput = document.getElementById('add-task__name')
            const startAtInput = document.getElementById('add-task__start-at')
            const dateInput = document.getElementById('add-task__date')
            console.log("dateInput is ",dateInput)
            let task = [{
                nameTask: nameInput.value,
                dateTask: dateInput.value,
                startAt: startAtInput.value
            }]
            console.log("dateInput is ",task[0].dateTask, task[0].nameTask)
            const indexOfTask = state.days.indexOf(task[0].dateTask)// **выдает ошибку при повторном использовании**
            
            // const indexOfTask = state.tasks.findIndex(i => i.dateTask === task[0].dateTask);
            if(indexOfTask ==-1){
                state.tasks.push(task)
                state.days.push(task[0].dateTask)
            }else{
                state.tasks[indexOfTask].push(task[0])
            }
            return {
                tasks: state.tasks
            }
        default:
            return state
    }
}
 // откуда берутся данныеlayout component
 
import React, {Component} from 'react'
import './layout.scss'
import {connect} from 'react-redux'

class Layout extends Component {
  
  render() {
    
    return (
      <div className="layout">
        <main>
          <div className="addTask">
            <form action="">
              <input id="add-task__name" type="text" placeholder="Введите название задачи"/>
              <input id="add-task__date" type="text"  placeholder="Введите дату" placeholder={this.props.today}/>
              <input id="add-task__start-at" type="text" placeholder="Время начала"/>
              <a onClick={() =>{this.props.addTask()}} >Сохранить</a>
            </form>
          </div>
          { this.props.children }
        </main>
      </div>
    )
  }
}
function mapStateToProps(state){
  return{
    today: state.tasksReducer.today
  }
}
function mapDispatchToProps(dispatch){
  return{
    addTask: () => dispatch({type:"addTask"})
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Layout)

введите сюда описание изображения


Ответы (1 шт):

Автор решения: 1ocke

Возможно дело в том, что вы не возвращаете остальной state, состоящий из today и days.

export default function (state = inialState, action){
    switch(action.type){
        case 'addTask':
            const nameInput = document.getElementById('add-task__name')
            const startAtInput = document.getElementById('add-task__start-at')
            const dateInput = document.getElementById('add-task__date')

            console.log("dateInput is ",dateInput)

            let task = [{
                nameTask: nameInput.value,
                dateTask: dateInput.value,
                startAt: startAtInput.value
            }]

            console.log("dateInput is ",task[0].dateTask, task[0].nameTask)
            const indexOfTask = state.days.indexOf(task[0].dateTask)// **выдает ошибку при повторном использовании**
        
            // const indexOfTask = state.tasks.findIndex(i => i.dateTask === task[0].dateTask);
            if(indexOfTask ==-1){
                state.tasks.push(task)
                state.days.push(task[0].dateTask)
            }else{
                state.tasks[indexOfTask].push(task[0])
            }
            // Возвращаем остальной стейт
            return {
                ...state,
                days: state.days,
                tasks: state.tasks,
            };
        default:
            return state
    }
}
→ Ссылка