Question

我得到一个TypeError，说明＆＃39; map＆＃39;未定义。刚刚切换到使用带有React 16的prop类型模块，我想知道我的代码中是否有一些语法问题或错误，因为我没有找到如何在我的代码中设置我的select函数。这是针对具有自己的容器的输入类型的表单。对于select.js，我的代码是：

import React from 'react';
import PropTypes from 'prop-types';

const Select = (props) => (
    <div className="form-group">
        <select
            name={props.name}
            value={props.selectedOption}
            onChange={props.controlFunc}
            className="form-select">
            <option value="">{props.placeholder}</option>
            {props.options.map(opt => {
                return (
                    <option
                        key={opt}
                        value={opt}>{opt}</option>
                );
            })}
        </select>
    </div>
);

Select.propTypes = {
    name: PropTypes.string.isRequired,
    options: PropTypes.array.isRequired,
    selectedOption: PropTypes.string,
    controlFunc: PropTypes.func.isRequired,
    placeholder: PropTypes.string
};

export default Select;

Answer 1

为组件编写默认道具以避免与道具相关的异常

Select.defaultProps = {
    options: [] // keep it as empty or give some default values
}

Answer 2

看起来你期望props.options是一个数组，但错误是选项上没有.map属性，这意味着它可能不是数组。

尝试console.log(props.options)和console.log(typeof props.options)，输出应该可以帮助您诊断问题。

如果props.option最终会获得正确的数据，但最初没有，请尝试使用(props.options || []).map代替props.options.map。

作为旁注，PropTypes不会影响React应用程序的运行方式，只是在开发应用程序时对道具执行输入验证。

React prop-type模块映射未定义

2 个答案: