Почему я получаю ошибку uncaught type при использовании карты в React JS jsx?

Question

Я создаю компонент для выбора ввода на основе доступных параметров в объекте моих курсов.

В настоящее время я получаю эту ошибку: Uncaught TypeError: Cannot read property 'map' of undefined

Вот мой код:

const SelectInput = ({name, label, onChange, defaultOption, value, error, options}) => { 
    return (
     <div className="form-group"> 
      <label htmlFor={name}>{label}</label> 
      <div className="field"> 
       {/* Note, value is set here rather than on the option - docs*/} 
       <select name={name} value={value} onChange={onChange} className="form-control"> 
       <option value="">{defaultOption}</option> 
       {options.map((option) => { 
        return <option key={option.value} value={option.value}>{option.text}</option>; 
       })} 
       </select> 
       {error && <div className="alert alert-danger">{error}</div>} 
      </div> 
     </div> 
    ); 
}; 

Кто знает причину?

Answer 1

Вы ожидаете, что options являются массивом, но вы предоставляете неопределенную options опоры, так что нет map метода не определен

обеспечивает не неопределенные параметры или попробовать это:

const SelectInput = ({name, label, onChange, defaultOption, value, error, options = []}) => { 
    ... 
} 

Answer 2

Я думаю, что это может быть рендеринг изначально, прежде чем реквизит будет полностью передан.

Попробуйте

const SelectInput = ({name, label, onChange, defaultOption, value, error, options}) => { 

    options = []; 

    return (
     <div className="form-group"> 
      <label htmlFor={name}>{label}</label> 
      <div className="field"> 
       {/* Note, value is set here rather than on the option - docs*/} 
       <select name={name} value={value} onChange={onChange} className="form-control"> 
       <option value="">{defaultOption}</option> 
       {options.map((option) => { 
        return <option key={option.value} value={option.value}>{option.text}</option>; 
       })} 
       </select> 
       {error && <div className="alert alert-danger">{error}</div>} 
      </div> 
     </div> 
    ); 
};