Невозможно прочитать карту свойства undefined - ошибка от ReactJS
Сообщение об ошибке:
Error: Cannot read property 'map' of undefined
Компонент React:
const checkBox = props => {
return (
<div>
<label htmlFor = {props.name} className='form-label'>
{props.title}
</label>
<div className='checkbox-group'>
{
props.options.map(option => {
return (
<label key = {option}>
<input
className='form-checkbox'
id = {props.name}
name = {props.name}
onChange = {props.handleChangeEvent}
value = {option}
checked = {props.selectedOptions.indexOf(option) > -1}
type='checkbox'
/>{' '}
{option}
</label>
)
})
}
</div>
</div>
)
}
В моем коде что-то не так? Если да, дайте мне знать. Может ли кто-нибудь помочь мне в этом?
Ошибка
Cannot read property 'map' of undefined
Выдается при выполнении функции карты в компоненте списка комментариев.
Можете ли вы показать, как вы используете checkbox и передаете реквизит? Если props является объектом, установите точку останова или console.info (), на что он установлен?
Я выполнил процедуру ниже, пожалуйста, проверьте
См. Пример в конце <Select/>, демонстрирующий, как передаются свойства. Вы с большей вероятностью получите помощь здесь, в Stack Overflow, предоставив достаточно информации другому разработчику, чтобы воспроизвести проблему самостоятельно.
так что я должен сделать то же самое для флажка?
да. Автор начинает с того, что показывает, какие компоненты вам нужны в форме, а затем подробно описывает их метод рендеринга, обработчики событий и показывает пропсы для передачи. Он не показал эту деталь для реквизитов с <Checkbox/>, похоже, это упражнение. для публики. :)
у меня есть реквизит для флажка обновления
<CheckBox title = {"Skills"} name = {"skills"} placeholder = {"Select Skills"} selectedOptions = {"disable"} value = {this.state.newUser.skillOptions} handleChangeEvent = {this.handleSkillsCheckBox} / >
все же я сталкиваюсь с той же проблемой.
Спасибо! Можете ли вы отредактировать свой вопрос, включив в него эту информацию? Я обновлю свой ответ, так как в вашем образце есть исправления для меня.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Комментарий к вопросу ссылается на руководство, показывающий, как построить форму и ее подкомпоненты. Несколько компонентов включают примеры того, как передать props, но этого нет в <Checkbox/>.
Чтобы восполнить этот пробел, вот пример того, как вы можете рассчитывать на использование <Checkbox/>. Я не читал статью полностью, поэтому надеюсь, что вы поможете исправить любые ошибки, которые я здесь допустил, и это поможет вам начать собственное развитие.
<Checkbox
title = {'Skills'}
name = {'skills'}
options = {this.state.skills} <!-- array of skills or empty array -->
selectedOptions = {this.state.newUser.skills} <!-- array of skills or empty array -->
handleChangeEvent = {this.handleInput}
/>
Приведенный выше пример кода не предназначен для копирования и вставки, а скорее является отправной точкой. То, что вы фактически передаете своему компоненту <Checkbox/>, зависит от того, что вы строите вокруг него.
Спасибо ... большое за терпение ... я понял
Вы также можете использовать простой запасной вариант, например.
const checkBox = props => {
const { options, name, titlem, selectedOptions, handleChangeEvent } = props
return (
<div>
<label for = {name} className = "form-label">
{title}
</label>
<div className = "checkbox-group">
{(options || []).map(option => {
return (
<label key = {option}>
<input
className = "form-checkbox"
id = {name}
name = {name}
onChange = {handleChangeEvent}
value = {option}
checked = {selectedOptions.indexOf(option) > -1}
type = "checkbox"
/>{" "}
{option}
</label>
);
})}
</div>
</div>
);
};
const checkBox = ({ options, name, title, selectedOptions, handleChangeEvent }) => {
return (
<div>
<label htmlFor = {name} className='form-label'>
{title}
</label>
<div className='checkbox-group'>
{
options && options.map(option => {
return (
<label key = {option}>
<input
className='form-checkbox'
id = {name}
name = {name}
onChange = {handleChangeEvent}
value = {option}
checked = {selectedOptions.indexOf(option) > -1}
type='checkbox'
/>{' '}
{option}
</label>
)
})
}
</div>
</div>
)
}
Лучше предоставить более подробную информацию о коде в своем ответе.
Похоже, что
optionsне может быть передан.