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

試してみてください。

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

を

Answer 2

私は、プロップが完全に渡される前に最初にレンダリングされている可能性があると思います。

あなたはoptionsが配列されていることを期待していますが、未定義options小道具を提供し、そう

が未定義でないオプションを提供し、未定義のためのmap方法が存在しないか、この試みる

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> 
    ); 
};