Javascript 反应-使用API中的数据填充选择下拉列表

我想用从api获取的数据填充我的

select>选项

s。一切正常，我可以在

控制台

或另一个

div

上看到我的数据，但在

选项

标记中，它们看起来像

对象

。我怎样才能修好它？这是我的密码：

    state = {
        loading: true,
        city: null,
    }
    async componentDidMount(){
        const url = ...;
        const response = await fetch(url, {
            headers: {
                ...
            }
        })
        const data = await response.json();
        this.setState({city: data.results[0], loading: false})
    }

...

<select>
  <option>Select city</option>
  <option>
    {this.state.loading || !this.state.city ? (<p>Loading...</p>) : 
    (<p>{ this.state.city.name }</p>)}
  </option>
</select>

状态={
加载：对，
城市：空，
}
异步组件didmount（）{
常量url=。。。；
const response=等待获取（url{
标题：{
...
}
})
const data=wait response.json（）；
this.setState（{city:data.results[0]，加载：false}）
}
...
选择城市
{this.state.loading | | |！this.state.city？（加载…
）：
（{this.state.city.name}
）}

p、 s：我不仅要显示第0个数据属性，还要显示所有数据属性。

<option>
    {this.state.loading || !this.state.city ? (<p>Loading...</p>) : 
    (<p>{ this.state.city.name }</p>)}
  </option>

{this.state.loading | | |！this.state.city？（加载…
）：
（{this.state.city.name}
）}

上述代码不能作为使用，或者任何其他标记不能驻留在选项标记内 p标记位于选项标记之外，不可见

---

那么呢？怎么做？删除p标签直接实现文本{this.state.city.name}现在它返回

TypeError:无法读取null的属性'name'

编辑上述代码，这样会更清晰

{this.state.city？this.state.city.name:'Loading'}

请投票