javascript - 填充 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>

当页面尝试加载时，我在控制台中看到以下内容:

Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B1%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at e.exports (invariant.js:42)

Answer 1

您正在渲染的选项是您选择选项中的一个对象，这是不正确的。您应该如下修改您的 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>
        ));
    }