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

【问题标题】：Populating React Dropdown Getting Error #31填充 React 下拉列表出现错误 #31
【发布时间】：2018-12-31 15:17:16
【问题描述】：

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

【问题讨论】：

对象在小时候是无效的，从我看到的每个选项和键和值都是一个对象。对于每个选项，您都会得到类似 {1:10} 的内容。

标签： javascript reactjs ecmascript-6

【解决方案1】：

附注

由于 JSON 不会将 key 的值解析为数字，因此它总是希望它是字符串。

因此，如果您将 key 更改为字符串值，您的 JSON 仍然有效

示例

但是，keys 不是数字，JSON 会自动将它们解析为字符串 -

var statesMap = [{name: 10}, {name: 20}, {name: 30}];

这样会被自动解析，因为key 被认为是一个字符串。

示例

我希望它清楚。

【讨论】：

【解决方案2】：

您正在渲染选项，这是您的选择选项中的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>
        ));
    }

【讨论】：