似乎无法在 React 中从此 api 检索数据

Question

import react from 'react';    

export default class App extends react.Component {

  state = {

    loading: true,

    person: null,

  }

难以获取要呈现的数据。数据确实显示在控制台日志上，但不会在反应页面上显示名称，请帮助。

任何帮助将不胜感激，谢谢

Answer 1

这是 API 响应：[{"id":1,"title":"Mr","firstName":"Danny","lastName":"Dyer","dob":"24/07/1977","active":true},{"id":2,"title":"Mr","firstName":"Nicholas","lastName":"Cage","dob":"07/01/1964","active":true},{"id":3,"title":"Miss","firstName":"Emma","lastName":"Watson","dob":"15/04/1990","active":true},{"id":4,"title":"Prof","firstName":"Bryan","lastName":"Cox","dob":"03/03/1968","active":true}]它是一个对象数组。仅当 API 响应是包含属性的对象data.res[0]时才有意义，例如res{&nbsp; "res": [&nbsp; &nbsp; {"id":1, ...因此，将您的代码更改为person: data.res[0]到person: data[0]和来自<div>{this.state.person.name.title}</div><div>{this.state.person.name.first}</div><div>{this.state.person.name.last}</div>到<div>{this.state.person.title}</div><div>{this.state.person.firstName}</div><div>{this.state.person.lastName}</div>正确导航数据。（还要确保将url字符串分隔符'或", not括起来< >）直播片段：class App extends React.Component {&nbsp; state = {&nbsp; &nbsp; loading: true,&nbsp; &nbsp; person: null,&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; const url = 'https://api.jsonbin.io/b/5e9ef690435f5604bb4567dd';&nbsp; &nbsp; fetch(url)&nbsp; &nbsp; &nbsp; .then(response => response.json())&nbsp; &nbsp; &nbsp; .then(data => this.setState({ person: data[0], loading: false }));&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.loading || !this.state.person ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>loading...</div>&nbsp; &nbsp; &nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>{this.state.person.title}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>{this.state.person.firstName}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>{this.state.person.lastName}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><div class="react"></div>

Answer 2

实际上我用不同的方式做到了！{this.state.loading ||&nbsp;!this.state.person ?&nbsp;（