TypeError: records.map не является функцией - проект First React, застрявший на этой ошибке с API

Question

Я пытался извлечь данные из этого локального API правительства

https://data.qld.gov.au/api/action/datastore_search?offset=370&resource_id=2bbef99e-9974-49b9-a316-57402b00609c&q=Mooloolaba

Мне удалось получить примеры данных API для загрузки в мой проект, но когда я перехожу киспользую этот API, я сталкиваюсь с ошибками, я думаю, что это потому, что я не правильно понял раздел set.state, хотя я не уверен, потому что я никогда раньше не работал с API, и этот, который я использую, структурирован иначе, чемпример.

Также я хотел бы получить только самый последний результат, этот API обновляется каждые полчаса.Если то, что я сделал неправильно, было черно-белым, пожалуйста, направьте меня в правильном направлении, прежде чем исправить мою проблему, я хотел бы узнать, где я ошибся:)

// Waves //

const WAPI = 'https://data.qld.gov.au/api/action/datastore_search?offset=370&resource_id=2bbef99e-9974-49b9-a316-57402b00609c&q=Mooloolaba';

class WApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      records: [],
    };
  }

  componentWillMount() {
    fetch(WAPI)
      .then(response => response.json())
      .then(data => this.setState({ records: data.records }));
  }

  render() {
    const { records } = this.state;

    return (
      <ul>
        {records.map(record =>
          <li>
          {record.Hsig} m
            {record.Direction} direction
          </li>
        )}
      </ul>
    );
  }

}

Answer 1

Ваша первая проблема (как вы выяснили) с использованием неправильного свойства объекта.Это должно быть data.result.records.Теперь, почему данные пусты?Я думаю, что вы используете неправильную конечную точку API.Я нашел это для горячих данных: https://data.qld.gov.au/dataset/coastal-data-system-near-real-time-wave-data/resource/2bbef99e-9974-49b9-a316-57402b00609c

Вот рабочий код.Кстати, используйте componentDidMount вместо componentWillMount, поскольку в будущем оно будет устаревшим.

const WAPI = 'https://data.qld.gov.au/api/action/datastore_search?resource_id=2bbef99e-9974-49b9-a316-57402b00609c&q=Mooloolaba';

class WApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      records: [],
    };
  }

  componentDidMount() {
    fetch(WAPI)
      .then(response => response.json())
      .then(data => this.setState({ records: data.result.records }));
  }

  renderRecords = () => this.state.records.map(record =>
      <li key={record._id}>
        {record.Hsig} m
        {record.Direction} direction
      </li>
  );

  render() {
    const { records } = this.state;

    return (
      <ul>
        {!records.length ? <p>Loading...</p> : this.renderRecords() }
      </ul>
    );
  }

}

ReactDOM.render(<WApp />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>