Question

我正在写React JSX使用的前端，但我不明白为什么对象元素没有显示在Select表单的元素的Option标记中：

通过对象中元素的数量（HTML代码），我在此标记内插入了空行：

<FormGroup className="col-md-5 mb-3">
   <Label for="type">Astronomer Name</Label>
   <select className="custom-select" name="astronomer_name" id="astronomer_name" onChange={this.handleChange} >
   <option selected type="text" autoComplete="astronomer_name">{item.astronomer_name || ''}</option>
   {Object.keys(astronomers).map((astronomer, index) => {
   return <option key={index} value={index}>{astronomer.astronomer_name}</option>})}
  </select>
</FormGroup>

使用变量的同一代码会提供类似[objectObject]（HTML代码）的对象：

<option type="text" autocomplete="astronomer_name">astronomer 2</option>
<option value="0"></option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>

在代码之外，此代码可提供所需的结果：

<option type="text" autocomplete="astronomer_name">astronomer 2</option>
<option value="0">[object Object][object Object][object Object][object Object][object Object]</option>
<option value="1">[object Object][object Object][object Object][object Object][object Object]</option>
<option value="2">[object Object][object Object][object Object][object Object][object Object]</option>
...

我得到了（HTML代码）：

<p>{tempAstronomers}</p>

Answer 1

Object.keys将对象的键作为数组返回。如果将天文学家存储在一个对象中，请使用Object.values(astronomers)检索名称。如果将天文学家存储在数组中，请使用astronomers.map。

数组元素未反映在React JSX的Option标签内

1 个答案: