为什么在 React JS jsx 中使用 map 时会出现未捕获的类型错误？

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 是一个数组，但你提供了 undefined options prop，所以没有 map 方法用于 undefined

不提供未定义的选项或试试这个：

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

为什么在 React JS jsx 中使用 map 时会出现未捕获的类型错误？

Why am I getting an uncaught type error when using map in React JS jsx?

javascript

dictionary

jsx

reactjs