Question

错误：无法读取未定义的属性“地图”

const checkBox = props => {
  return (
    <div>
      <label for={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>
  );
};

在我的代码中有什么问题吗？如果是，请告诉我。有人可以帮我这个忙吗？执行注释列表组件中的map函数时，引发错误“无法读取未定义的map属性”。

Answer 1

问题注释引用了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}
/>

Answer 2

您也可以使用简单的后备广告。

const checkBox = props => {
  const { options, name, titlem, selectedOptions, handleChange } = 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={handleChange}
                value={option}
                checked={selectedOptions.indexOf(option) > -1}
                type="checkbox"
              />{" "}
              {option}
            </label>
          );
        })}
      </div>
    </div>
  );
};

Answer 3

const checkBox = ({  options, name, title, selectedOptions, handleChange }) => {
      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={handleChange}
                      value={option}
                      checked={selectedOptions.indexOf(option) > -1}
                      type='checkbox'
                    />{' '}
                    {option}
                  </label>
                )
              })
            }
          </div>
        </div>
      )
    }

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

3 个答案: