React - 使用来自 API 的数据填充 select 下拉列表

Question

我想用从 api 获取的数据填充我的 select>option。一切正常，我可以在 console 或另一个 div 上看到我的数据，但在 option 标签中它们看起来像 Object object。我该如何解决？这是我的代码：

    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>

p.s: 我不仅应该显示第 0 个数据属性，还应该显示所有数据的属性。

Answer 1

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

以上代码将不起作用，因为

或任何其他标签不能位于选项标签内 p 标签超出选项标签并且不可见

React - 使用来自 API 的数据填充 select 下拉列表

React - Fill select dropdown with data from API

javascript

node.js

javascript-objects

reactjs

fetch-api