Блог

Я создаю программу для составления списка задач, используя react и redux, и я написал функцию для удаления элементов из списка при нажатии на них и добавления их во второй список, но вычеркнул. Я пытаюсь заставить функцию запускать onClick для каждого элемента списка, но по какой-то причине, когда я добавляю к нему событие, когда я нажимаю на кнопку отправки, чтобы добавить новую задачу, все на странице исчезает.

Я уже пробовал другие события, такие как OnMouseDown, и все они вызывали одно и то же. Я пытался изменять различные части кода, но единственное, что, похоже, нарушает его, — это добавление события onClick .

Функция для обработки удаления списка находится здесь

 const taskReducer = (state = [[],[]], action) => {
    switch(action.type) {
        case ADD: 
            return [state[0].concat(action.task), [...state[1]]];
        case COMP:
            let idx = indexOf(state[0].filter(action.task));
            let beg = state.slice(0, idx);
            let end = state.slice(idx   1);
            let newState = [[...beg, ...end], [...state[1], action.task]];
            return newState;
        default: 
            return state;
    }
}
  

и часть, которая генерирует кнопку и два списка, находится здесь

 <button 
   id = 'submitGoal'
   onClick = {this.submitHandler} >Submit</button>
<ul id = 'currentTasks'>
   {this.props.tasks.map( (task, idx) => {
        return (
             <li onClick = {this.completeHandler(event.target)} key={idx}>{task}</li>
             )
        })
   }
</ul>
<ul id = 'completedTasks'>
     {this.props.compTasks.map( (task, idx) => {
          return (
               <li key={idx}>{task}</li>
               )
          })
     }
</ul>
  

Вся программа также работает прямо сейчас по адресу https://jeengland.github.io/molehills /

Заранее спасибо за любую помощь!

Проблема в indexOf том, что она не определена в вашем taskReducer . Я взглянул на ваш пример и проверил консоль, чтобы получить это:

Я думаю, вы имеете в виду использовать Array.indexOf здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf