javascript - React - 使用 API 中的数据填充选择下拉列表

Question

我想select>option用从 api 获取的数据填充我的 s。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>

ps：我不仅应该显示第 0 个数据属性，还应该显示所有数据的属性。

标签： javascriptnode.jsreactjsjavascript-objectsfetch-api

Answer 1

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

上面的代码不能作为

或任何其他标签不能驻留在选项标签内 p 标签在选项标签之外并且不可见