填充React下拉列表时出现错误#31

Question

我将一些Javascript定义为：

populateOptions() {
    var statesMap = [{1: 10}, {2: 20}, {3: 30}];

    return statesMap.map((option, index) => (
        <option key={index} value={option}>{option}</option>
    ));
}

这是从render()函数调用的：

<div className="col-md-3">
<select name="borrowerState" className="form-control dropDownStyle" onChange={this.handleChange} value={this.props.borrower.borrowerState}>
    {this.populateOptions()}
</select>

当页面尝试加载时,我在控制台中得到以下信息：

错误：缩小的反应错误#31；访问https://reactjs.org/docs/error-decoder.html？invariant=31&args[]=object%20with%20keys%20%7b1%7d&args[]=获取完整消息，或使用非缩小的开发环境获取完整错误和其他有用警告。在E.exports(invariant.js:42)

Answer 1

您呈现的选项是选择选项中的对象,这是不正确的。您应该修改您的statesMap和render函数，如下所示。

populateOptions() {

        var statesMap = [{'id': 1, 'data': 10}, {'id': 2, 'data': 20}, {'id': 3, 'data': 30}];

        return statesMap.map((option) => (
            <option key={option.id} value={option.data}>{option.data}</option>
        ));
    }