Javascript 无法在ReactJS中显示获取的api数据

我正试图从获取的api数据中显示用户的名字。。。这个代码有什么问题？ 我确认已经从api中获取了数据，但在显示它时。。。它返回空白，没有错误

class App extends Component 
    constructor() {
      super()
      this.state = {
        loading: false,
        user: {}
      }
    }
    componentDidMount() {
      this.setState({loading: true})
      fetch("https://reqres.in/api/users/2")
      .then(response => response.json())
      .then(data => {
        this.setState({
          loading: false,
          user: data
        })
      })
    }
  render() {
    const text = this.state.loading ? "loading..." : this.state.user.first_name
    return (
      <div>first name: {text}</div>
    )
  }
}

export default App

类应用程序扩展组件
构造函数（）{
超级（）
此.state={
加载：false，
用户：{}
}
}
componentDidMount（）{
this.setState（{loading:true}）
取回（“https://reqres.in/api/users/2")
.then（response=>response.json（））
。然后（数据=>{
这是我的国家({
加载：false，
用户：数据
})
})
}
render（）{
const text=this.state.loading？“加载…”：this.state.user.first_name
返回(
名字：{text}
)
}
}
导出默认应用程序

在最后一个

回调函数中命名整个响应
数据
。
响应本身还包含另一个名为
data
的对象，用于访问您应该在
setState
中使用的
data.data

您可能希望在回调中对其进行如下反结构：

fetch("https://reqres.in/api/users/2")
.then(response => response.json())
      .then({data} => {
        this.setState({
          loading: false,
          user: data
        })
})

data
在
中是什么样子的。然后（data=>{
如果您将此设置为
this.state={loading:true}
然后删除
这个.setState（{loading:true}）
在
组件安装
{data:{“id”：2，“email:”janet。weaver@reqres.in，“名”：“珍妮特”，“姓”：“Weaver”，“avatar:”}，“ad:{“公司”：“StatusCode Weekly”，“url:“关注软件开发、基础设施、服务器、性能和堆栈端的每周新闻稿”。}}}}试试这种方法。setState（{加载：false，用户：data.data}）应该有帮助！在您的示例中，数据实际上不是数据而是结果。我猜您可以使用
data.items
或
data.data
访问结果中的数据（其中一个应该有效）