JSON.stringify 返回“”反应

Question

React/Js newbie here.

I have a fairly simple crypto api fetch:

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;

This is the result

Where the double quotes are """" my intended result is to print the json object shown in the console log. The console is logging the intended response:

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

Answer 1

This looks like it might just be a typo. You need to replace setResponseData(responseData) with setResponseData(response.data) .

Answer 2

You said you are begginer, so I wanted to show some stuff that might help along the way...

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;

I could not test all this, but should work.

Put fetch logic outside the component so it could be extracted to other file and unit tested.

You can use const in useState destructuring, both are immutable.

Used point-free to simplify doFetch logic.

useEffect is only needed if you want to fetch on first render, before any button clicks.

removed the useCallback, probably too much complexity for something that simple... couldn't see the necessity to use memoization here, but maybe your response is giant and I'm wrong...

I believe our friends in the comments had already awnsered your question, so I wanted to show some different style of coding the same thing, for you to have another example...