reactJS 动态下拉填充地图功能

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 映射函数。这是呈现此屏幕时现在生成的内容：

如您所见，地图功能现在正在填充我的下拉列表。但是，下拉列表低于设备的末尾。使用开发人员工具在 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>
    );

Answer 2

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

obj.map((item) =>

应该是

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

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

Answer 3

你可以做到这一点。

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

“i”将包含一个从 0 到 100 的值，这就是为什么我将它设为“i+1”

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

Answer 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>
    )

Answer 6

我正在使用以下代码使用“selectArry”实现下拉功能。

const selectArry = [
{
   Key: "es",
   Value: "Espresso",
},
{
   Key: "ri",
   Value: "Ristretto",
},
{
   Key: "lb",
   Value: "Long Black",
},{
   Key: "mm",
   Value: "Mezzo Mezzo",
},{
   Key: "c",
   Value: "Cappuccino",
}]

<select name="coffee" defaultValue="">
  {props.selectArry && props.selectArry?.data.map((cItem) =>
      <option key={cItem.Value}>{cItem.Value}</option>
   )}
</select>