Ошибка async-await не может показать данные в таблице реагирования - PullRequest
0 голосов
/ 16 марта 2019

Я пытаюсь запустить REST API и отобразить данные в таблице реакций.

Ниже приведен мой код:

import React, { Component } from "react";
import "react-table/react-table.css";
import ReactTable from "react-table";

class App extends Component {
  constructor() {
    super();
    this.state = { data: [] };
  }

  async componentDidMount() {
    const url = "some_url";
    const username = "name";
    const password = "password";
    const credentials = `${username}:${password}`;
    const base64EncodedCredentials = btoa(credentials);

    let headers = new Headers();
    headers.append("Content-Type", "application/json");
    headers.append("Accept", "application/json");
    headers.append("Access-Control-Allow-Credentials", true);
    headers.append("Access-Control-Allow-Origin", true);
    headers.append("Authorization", "Basic " + base64EncodedCredentials);
    headers.append("Origin", "http://localhost:3000");

    try {
      const response = await fetch(url, {
        mode: "no-cors",
        credentials: "include",
        method: "GET",
        headers: headers
      });
      if (!response.ok) {
        throw Error(response.statusText);
      }
      const json = await response.json();
      console.log(json);
      this.setState({ data: json });
    } catch (error) {
      console.log(error);
    }
  }

  render() {
    const data = this.state.data;
    console.log(this.state.data);
    const columns = [
      {
        Header: "Name",
        accessor: "incidentId"
      },
      {
        Header: "Rank",
        accessor: "description"
      }
    ];
    return (
      <div className="App">
        <ReactTable
          data={data}
          columns={columns}
          defaultPageSize={20}
          pageSizeOptions={[5, 10, 20, 25, 50, 100]}
          showPagination={true}
          showPaginationTop={false}
          showPaginationBottom={true}
          showPageSizeOptions={true}
          sortable={true}
          multiSort={true}
          resizable={true}
          filterable={true}
        />
      </div>
    );
  }
}

export default App;

Я добавил заголовки, режим: нет-cors и т. д. для устранения ошибок CORS / CORB.

Я вижу ответ в safari (элемент inspect) на вкладке Ресурсы.

Когда я пытаюсьраспечатайте ответ в консоли, как показано в коде: я получаю сообщение об ошибке вроде:

Error
_callee$
tryCatch
invoke
asyncGeneratorStep
_next
promiseReactionJob

Как мне решить эту проблему?

Я попытался запустить случайный API в Интернете - // const url = "https://api.coinmarketcap.com/v1/ticker/";

он работает нормально и показывает данные в консоли (но я должен удалить все заголовки и cors вещь из кода). Но для моего REST API я долженвнести эти изменения, и он работает, как я вижу ответ на вкладке "Ресурсы", но я не понимаю вышеупомянутую ошибку и как ее устранить? Пожалуйста, помогите.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...