#javascript #reactjs #react-redux
#javascript #reactjs #react-redux
Вопрос:
Я пытаюсь отобразить элемент путем сопоставления с хранилищем 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. Оказывается, все мои проблемы коренились в моем использовании event.target , который не только был в неправильном месте, но и был неправильным кодом. Я пытался настроить таргетинг на внутреннюю часть элемента списка, но использовал event target, который буквально передавал «<li>» в функцию вместо значения внутри <li></li> . Правильным выражением для использования было event.target.innerHTML , которое успешно извлекло значение списка из элемента.
Ответ №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
}
Комментарии:
1. Хорошо, следуя вашему совету, мне удалось сделать еще один шаг вперед, прежде чем все сломается. Получаю аналогичную ошибку, как и раньше, но попытаюсь применить этот совет ко всем моим новым проблемам. Одна вещь, с которой я столкнулся, была, когда я попытался реализовать ваш совет № 2 и изменить его на this.completeHandler(this, task), он продолжал говорить мне, что задача не определена. Но спасибо за помощь!
Ответ №2:
В onClick
onClick = {this.completeHandler(event.target)}
Вы вызываете this.completeHandler
, имея ()
.
Измените его на:
onClick = {this.completeHandler.bind(this)}
И измените аргумент функции на event
completeHandler(event) {
this.props.completeTask(event.target)
Комментарии:
1. Хорошо, спасибо за совет! У меня уже был настроен аргумент для определения this.completeHandler как this.completeHandler.bind(this), но я не понимал, что неправильно его вызываю.