reactJS动态下拉菜单填充了地图功能答案

【问题标题】：reactJS dynamic drop down populated with map functionreactJS动态下拉菜单填充了地图功能
【发布时间】：2018-10-12 20:06:31
【问题描述】：

我正在尝试使用从 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 映射函数。这是现在渲染此屏幕时生成的内容：

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

再次感谢 stackoverflow 社区！

【问题讨论】：

标签： javascript reactjs

【解决方案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>
    );

【讨论】：

【解决方案2】：

你正在尝试映射一个对象，而不是一个数组，修改你的代码：

obj.map((item) =>

应该是

obj["array"].map((item) =>

您可以在您的 console.log 中看到它。它说 { 数组：[....

【讨论】：

【解决方案3】：

你可以这样做。

{Array.from(Array(100), (e, i) => {
    return <option value={i+1}>{i+1}</option>
   }
 )}

“i”将包含一个从 0 到 100 的值，这就是我将其设为“i+1”的原因

【讨论】：

【解决方案4】：

你在对象上做 .map 但不是在数组上。尝试使用 .符号

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

完整代码

renderPercent = () => {
    let obj = {
        array: []
    };
    for (var l=0;l<100;l++){
        obj.array[l] = l+1;
    }
    return (
        <div>
            <select>
                {obj.array.length > 0 && obj.array.map((item) =>
                    <option key={item.array}>{item.array}</option>
                 )}
            </select>
        </div>
    )
}

【讨论】：

【解决方案5】：

试试这样的：

var percentArray = [];

for (var l=0;l<100;l++){
    percentArray.push(l);
}

let optionItems= percentArray.map(x => `<option key=${x}>${x}</option>`);

...

    return (
        <div>
            <select>
                {optionItems}
            </select>
        </div>
    )

【讨论】：