Блог

Здесь новичок в React / Js.

У меня довольно простая выборка crypto api:

 import React from 'react';
import axios from 'axios';
import './data.css';

function App() {
  let [responseData, setResponseData] = React.useState('');

  const fetchData = React.useCallback(() => {
    axios({
      "method": "GET",
      "url": "https://rest.coinapi.io/v1/exchangerate/BTC/USD",
      "headers": {
        "X-CoinAPI-Key": process.env.REACT_APP_API_KEY
      }
    })
    .then((response) => {
      console.log(response.data);
      setResponseData(responseData);

    })
    .catch((error) => {
      console.log(error)
    })
  }, [responseData])

  React.useEffect(() => {
    fetchData()
  }, [fetchData])

  return (
    <div className='main'>
      <div className="App">
      <header className="App-header">
        <h1>
          Fetching Data with React Hooks
        </h1>
        <button type='button' onClick={fetchData}>Click for Data</button>
      </header>
      <pre>{JSON.stringify(responseData)}</pre>
    </div>
    </div>
  );
}

export default App;
 

Это результат

Где двойные кавычки «»»» мой предполагаемый результат — распечатать объект json, отображаемый в журнале консоли. Консоль регистрирует предполагаемый ответ:

 {
  "time": "2021-02-10T03:36:21.6225472Z",
  "asset_id_base": "BTC",
  "asset_id_quote": "USD",
  "rate": 46389.408377086196898279013665
}
 

Вы сказали, что вы начинающий, поэтому я хотел показать некоторые вещи, которые могут помочь на этом пути…

 import React, {useEffect, useState} from 'react';
import axios from 'axios';
import './data.css';

const fetch = () => axios({
      "method": "GET",
      "url": "https://rest.coinapi.io/v1/exchangerate/BTC/USD",
      "headers": {
        "X-CoinAPI-Key": process.env.REACT_APP_API_KEY
      }
    })
    .then(resp => resp.data)

function App() {
  const [responseData, setResponseData] = useState('');
  
  const doFetch = () => fetch()
    .then(setResponseData)
    .catch(console.log)
  
  useEffect(doFetch, []); //only needed if you fetch on first render

  return (
    <div className='main'>
      <div className="App">
      <header className="App-header">
        <h1>
          Fetching Data with React Hooks
        </h1>
        <button type='button' onClick={doFetch}>Click for Data</button>
      </header>
      <pre>{JSON.stringify(responseData)}</pre>
    </div>
    </div>
  );
}

export default App;
 

Я не смог протестировать все это, но должно сработать.

Поместите логику выборки вне компонента, чтобы ее можно было извлечь в другой файл и протестировать модуль.

Вы можете использовать const при деструктурировании useState , оба являются неизменяемыми.

Используется без точек для упрощения логики doFetch.

useEffect необходим только в том случае, если вы хотите выполнить выборку при первом рендеринге, перед нажатием любой кнопки.

удален useCallback, вероятно, слишком сложный для чего-то такого простого … не вижу необходимости использовать здесь memoization, но, возможно, ваш ответ гигантский, и я ошибаюсь…

Я полагаю, что наши друзья в комментариях уже ответили на ваш вопрос, поэтому я хотел показать какой-то другой стиль кодирования того же самого, чтобы у вас был другой пример…

Похоже, это может быть просто опечатка. Вам нужно заменить setResponseData(responseData) на setResponseData(response.data) .