Question

am试图从获取的api数据中显示用户的名字...这个Reactjs代码可能有什么问题？我确认已经从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

Answer 1

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

您可能希望在回调中对它进行解构：

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

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

1 个答案: