React говорит, что я пытаюсь визуализировать объект как дочерний элемент React, но я не могу определить, где

Question

Я пытаюсь отобразить элемент путем сопоставления с избыточным хранилищем, и по какой-то причине реакция думает, что я пытаюсь вернуть объект (ошибка: объекты недопустимы как дочерний элемент React (найдено: [объект HTMLButtonElement] Я просмотрел весь свой код и несколько других ответов людям с похожими проблемами, но, похоже, ничего не решает проблему.

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

Код, вызывающий проблему, - это onClick внутри тега li в этом блоке.

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

Обработчик, на который он ссылается, просто

completeHandler(target) {
     this.props.completeTask(target)

Который ссылается на этот блок в моем магазине приставок

const compTask = (task) => {
    return {
        type: COMP,
        task
    }
}

Также я не знаю, есть ли проблема здесь, но вот мои два куска кода mapToProps, я видел проблемы там, где была ошибка

const mapStateToProps = (state) => {
    return {
        tasks: state[0],
        compTasks: state[1]
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        submitNewTask: (nTask) => {
            dispatch(addTask(nTask))
        },
        completeTask: (cTask) => {
            dispatch(compTask(cTask))
        }
    }
};

а вот мое хранилище редуксов, на всякий случай проблема в том, как я храню задания

const taskReducer = (state = [[],[]], action) => {
    switch(action.type) {
        case ADD: 
            return [state[0].concat(action.task), [...state[1]]];
        case COMP:
            let idx = state[0].indexOf(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;
    }
}

Все приложение работает в https://jeengland.github.io/molehills/ на тот случай, если вы хотите увидеть проблему и ошибку вживую.

Извините, если я положил слишком много, я просто понятия не имею, где может возникнуть проблема. Ошибка реакции ужасно неспецифична, поэтому я не знаю, что могло ее вызвать.

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

edit: Я успешно решил проблему с советом из двух приведенных ниже комментариев, а также с пониманием того, что я использовал event.target, когда мне следовало использовать event.target.innerHTML. Подробнее в комментариях.

Answer 1

При просмотре кода возникает несколько проблем.

1) Вызов обработчика события вместо передачи функции:

<li onClick = {this.completeHandler(event.target)}

2) event.target не определен. Вместо этого пройдите задание

<li onClick = {this.completeHandler.bind(this, task)}

3) задача может быть объектом (объектом события), который выдает ошибку. Используйте что-то вроде имени задачи в теге li

<li onClick = {this.completeHandler(event.target)} key={idx}>{task.name}</li>

4) Вместо mapDispatchToProps вы можете использовать версию объекта, что упрощает сочетание клавиш при совпадении параметров.

const mapDispatchToProps = {
  submitNewTask: addTask,
  completeTask: compTask
}

Answer 2

В onClick

onClick = {this.completeHandler(event.target)}

Вы вызываете this.completeHandler, имея ().

Измените его на:

onClick = {this.completeHandler.bind(this)}

И изменить аргумент функции на event

completeHandler(event) {
     this.props.completeTask(event.target)