javascript - 无法读取未定义的属性 'map' - 来自 ReactJS 的错误

标签 javascript html css reactjs react-redux

错误信息:

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.handleChange}
                  value={option}
                  checked={props.selectedOptions.indexOf(option) > -1}
                  type='checkbox'
                />{' '}
                {option}
              </label>
            )
          })
        }
      </div>
    </div>
  )
}

我的代码有什么问题吗?如果是,请告诉我。有人可以帮我解决这个问题吗?

错误

Cannot read property 'map' of undefined

评论列表组件中的map函数执行时抛出。

最佳答案

问题评论引用了 tutorial显示如何构建表单及其子组件。几个组件包括如何通过 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 -->
       handleChange = {this.handleInput}
/>

关于javascript - 无法读取未定义的属性 'map' - 来自 ReactJS 的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53897314/

相关文章:

javascript - Node.js-事件.js :154 throw err write EPIPE; Program Crashing

javascript - OSX仪表板小部件命令行访问问题

javascript - JQuery、Froala - 更改光标所在元素的 CSS

javascript - angular ui-grid 排序图标显示不正确

css - 如何更改 CSS 中的焦点状态以仅影响键盘而不影响鼠标点击

javascript - "Push"通知用户

javascript - HTML 文件的总大小(包括其中图像的大小)

html - 将子元素定位在 z-index 大于其父元素的元素之上

html - Bootstrap 响应式导航栏不会折叠

CSS flex 盒 : How to fill the remaining screen height with a nested div?