我将一些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)
您呈现的选项是选择选项中的对象,这是不正确的。您应该修改您的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>
));
}
