如何使 JSON 响应数据全局:)

Question

目前正在为我的投资组合做一个股票项目，我正在使用 finnhub 作为 API。我可以将所有内容记录到我的控制台。但是我无法渲染它，因为“数据”不是全局声明的，必须在某个函数内。

我试过全局渲染但是没有成功...

所以我的问题是如何使 'data' 全局化，以便我可以在“StockHeader 的”return 中呈现它？

这是我目前所掌握的...

import React,{ useState, useEffect } from 'react';


const StockHeader  = (data) => {

  const [stocks, setStocks] = useState({});
  const getStocks = () => {
    //setting stocks
    setStocks(stocks)

}

//calling it once
useEffect(()=> {

  getStocks();

}, [])


//using finhubs ready made code from documentation

const finnhub = require('finnhub');
const api_key = finnhub.ApiClient.instance.authentications['api_key'];
api_key.apiKey = "my apikey" 
const finnhubClient = new finnhub.DefaultApi()

finnhubClient.quote("AAPL", (error, data, response) => {

  //I can log the data but I cant show it in my component
 console.log(data.c)

});

return (
  <>
  {/* This says that data is not defined */}
    <h1>{data.c}</h1>
  </>
)


}


export default StockHeader

Answer 1

您只需要对代码进行一些重组，以便 API 请求只发生一次，这样您就可以使用 setStocks 来存储它：

const StockHeader  = (data) => {

  const [stocks, setStocks] = useState({});

  useEffect(()=> {
    //this could be separated into a `getStocks` function if you want
    const finnhub = require('finnhub');
    const api_key = finnhub.ApiClient.instance.authentications['api_key'];
    api_key.apiKey = "my apikey" 
    const finnhubClient = new finnhub.DefaultApi()

    finnhubClient.quote("AAPL", (error, data, response) => {
      console.log(data.c);
      setStocks(data.c);
    });

  }, []);

  return (
    <>
      {/* You probably don't want to render `stocks` itself, but this shows you how to get access to the variable */}
      <h1>{stocks}</h1>
    </>
  )
}

如何使 JSON 响应数据全局:)

How to make a JSON response data global :)

javascript

jsx

reactjs

react-native