javascript - reactJS 动态下拉菜单填充了 map 函数

Question

我正在尝试呈现一个简单的下拉列表，其中包含从 1 到 100 的数字。我创建了一个以数组作为唯一元素的对象。我用一个值填充每个数组元素，然后尝试映射该对象以生成下拉项。这是我正在执行的代码:

renderPercent = () => {
    let obj = {
        array: []
    };
    for (var l=0;l<100;l++){
        obj.array[l] = l+1;
    }
    console.log("obj: ", obj);
    let optionItems = obj.array.map((item) =>
        <option key={item}>{item}</option>
    );
    return (
        <div>                
            <div className="row">
                <div className="col-9 text-left">
                    <label>Select the percent to transfer</label>
                </div>
                <div className="col-2 text-left">
                    <select>
                        {optionItems}
                    </select>
                </div>
                <div className="col-1 text-left">
                    <label>&nbsp;</label>
                </div>
            </div>
        </div>
    )
}

我按照建议修改了 optionItems 映射函数。这是呈现此屏幕时现在生成的内容:

如您所见， map 功能现在正在填充我的下拉列表。但是，下拉列表低于设备的末尾。使用开发人员工具在 Chrome 中查看时，这只是一个错误吗？我注意到的另一件事是下拉列表中的数字比页面的重置字体更大。在我单击下拉箭头之前，值 1 显示在下拉列表中，这是正确的大小，但是一旦我展开下拉列表，数字似乎要大得多。为什么会这样？

再次感谢 stackoverflow 社区!

Answer 1

obj 是一个对象，它没有 map 函数。而 obj.array 是一个具有 map 函数的列表。

下面的代码

let optionItems = obj.map((item) =>
        <option key={item.array}>{item.array}</option>
    );

应该是

let optionItems = obj.array.map((item) =>
        <option key={item}>{item}</option>
    );