时间戳

首页 > 解决方案 > 填充 React 下拉列表出现错误 #31

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

问题描述

我有一些 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>

当页面尝试加载时，我在控制台中得到了这个：

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

标签： javascriptreactjsecmascript-6

解决方案

您正在渲染选项，这是object您选择选项中不正确的选项。您应该修改您的 statesMap 和渲染函数，如下所示。

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

推荐阅读