Блог

Я пытаюсь отобразить элемент путем сопоставления с хранилищем redux, и по какой-то причине react думает, что я пытаюсь вернуть объект (ошибка: объекты недопустимы как дочерний элемент React (найдено: [object 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)
 

Который ссылается на этот блок в моем хранилище redux

 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))
        }
    }
};
 

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

 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 / на случай, если вы хотите увидеть проблему и ошибку вживую.

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

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

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

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

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
}
 

В onClick

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

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

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

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

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

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