Question

我有一个对象要遍历到一个select选项，但出现此错误：

警告：validateDOMNesting（...）：<select>不能作为子项出现的<select>。

我的回报是：

                <label>
                Select your trip:
                  <select value={this.state.totalMiles} onChange={this.onTotalMileChange}>
                    <option value="0">Custom Trip</option>
                    {Object.entries(PRESETS).map(([campus, mileage]) => (
                      <select key={campus} value={mileage.map}>{campus.map}</select>))} 
                  </select>
                 </label>

我在这里做错了什么？我该如何解决？

以下是提供帮助的对象：

const PRESETS = {
    // round trip for each campus from MWC
    TUL_FULL_TRIP: 341,
    OKC_FULL_TRIP: 156,
    TEXAS_FULL_TRIP: 504,
    alb: 3042,
    bao: 270,
    bnb: 26,
    cen: 33,
    cta: 237,
    edm: 33,
    fts: 379,
    ftw: 435,
    hnv: 1383,
    jnk: 207,
    klr: 391,
    mor: 33,
    msf: 442,
    mus: 44,
    ncs: 1220,
    nkc: 729,
    noc: 35,
    nor: 40,
    okc: 24,
    omh: 954,
    opk: 33,
    ows: 660,
    rga: 437,
    rrn: 1131,
    sba: 229,
    shw: 65,
    soc: 24,
    spf: 570,
    sto: 218,
    stw: 129,
    tul: 218,
    wch: 329,
    wel: 2902,
    wwk: 338,
    ykn: 43,
    ikea: 401

    }

Answer 1

您不应在父选择元素内嵌套多个选择元素。我相信您打算使用<td [attr.rowspan]= "abc.length">元素。从那里，您可以将相应的值分配给选项<option>道具。

value

遍历对象以创建用于选择的选项

1 个答案: