React+Typescript как правильно cделать async запрос?

192

28 февраля 2022, 16:30

Хочу сделать компонент, который перед загрузкой берет данные с https://api.coinmarketcap.com/v1/ticker/?limit=10
и записывает их в таблицу.

import React, { Component } from 'react';
class About extends Component {
    constructor() {
        super();
        this.state = { data: [] };
    }
    async componentDidMount() {
        const response = await fetch(`https://api.coinmarketcap.com/v1/ticker/?limit=10`);
        const json = await response.json();
        this.setState({ data: json });
    }
    render() {
        return (
            <div className="App">
                {this.state.data.map(el => (
                    <li key={el.id}>
                        {el.name}: {el.price_usd}
                    </li>
                ))}
            </div>
        );
    }
}
export default About;

На чистом react всё работает, но если я использую React + TypeScript выдаёт ошибку.

UPD: Вариант на ts (который у меня не работает)

interface IHttpResponse<T> extends Response {
  parsedBody?: T;
}
export const http = <T>(request: RequestInfo): Promise<IHttpResponse<T>> => {
  let response: IHttpResponse<T>;
  return new Promise(resolve => {
    fetch(request)
      .then(res => {
        response = res;
        return res.json();
      })
      .then(body => {
        response.parsedBody = body;
        resolve(response);
      });
  });
};
// example consuming code
interface ITodo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}
const response = await http<ITodo[]>(
  "https://jsonplaceholder.typicode.com/todos"
);

Answer 1

1)

используйте интерфейсы:

class About extends Component<{}, {}> {}
class About extends Component<any, any> {}

или

class About extends Component<PropsI, StateI> {}

2)

пишите на JS:

class User {
   name = 'userName'
}

3)

и всё будет работать

ТАМ на TS

// import React from 'react'; 
// import ReactDOM from 'react-dom'; 
class About extends React.Component { 
    constructor() { 
        super(...arguments); 
        this.state = { data: [] }; 
    } 
    async componentDidMount() { 
        const response = await fetch(`https://api.coinmarketcap.com/v1/ticker/?limit=10`); 
        const json = await response.json(); 
        this.setState({ data: json }); 
    } 
    render() { 
        return (React.createElement("div", { className: "App" }, this.state.data.map(el => (React.createElement("li", { key: el.id }, 
            el.name, 
            ": ", 
            el.price_usd))))); 
    } 
} 
ReactDOM.render(React.createElement(About, null), document.body); 
// export default About

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

4) чё-т ссылка крашится, продублирую TS код

import React from 'react';
import ReactDOM from 'react-dom';

type respX = {
    "id": any,
    "name": any,
    "symbol": any,
    "rank": any,
    "price_usd": any,
    "price_btc": any,
    "24h_volume_usd": any,
    "market_cap_usd": any,
    "available_supply": any,
    "total_supply": any,
    "max_supply": any,
    "percent_change_1h": any,
    "percent_change_24h": any,
    "percent_change_7d": any,
    "last_updated": any,
}
interface PropsI { }
interface StateI {
    data: respX[];
}
class About extends React.Component<PropsI, StateI> {
    state:StateI = { data: [] }
    async componentDidMount() {
        const response = await fetch(`https://api.coinmarketcap.com/v1/ticker/?limit=10`);
        const json = await response.json();
        this.setState({ data: json });
    }
    render() {
        return (
            <div className="App">
                {this.state.data.map(el => (
                    <li key={el.id}>
                        {el.name}: {el.price_usd}
                    </li>
                ))}
            </div>
        );
    }
}
ReactDOM.render(React.createElement(About, null), document.body);
// export default About