如何让React项目中Finnhub API返回的JSON响应数据可全局渲染

你的代码存在3个核心问题导致无法渲染接口返回的数据：

• 接口回调的data仅在回调函数作用域内有效，没有同步到组件状态里，你不需要定义全局变量，React的状态就是用来存储这类需要渲染的动态数据的
• 你声明的stocks状态没有被正确赋值，原来的getStocks属于空操作
• 接口请求直接写在组件顶层，会导致每次组件重渲染都重复发起请求，完全没有必要

正确的修改代码如下：

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

// 组件参数是props，你不需要传data进来所以可以留空
const StockHeader  = () => {
  // 用stocks状态存接口返回的股票数据
  const [stocks, setStocks] = useState({});

  useEffect(()=> {
    // 把Finnhub初始化和请求都放到useEffect里，组件挂载时仅执行一次
    const finnhub = require('finnhub');
    const api_key = finnhub.ApiClient.instance.authentications['api_key'];
    api_key.apiKey = "你的apikey" 
    const finnhubClient = new finnhub.DefaultApi()

    finnhubClient.quote("AAPL", (error, data, response) => {
      console.log(data.c)
      // 拿到数据后存到状态里
      setStocks(data)
    });
  }, [])

  return (
    <>
      {/* 加可选链?.防止数据还没返回时渲染报错，也可以自定义加载提示 */}
      <h1>{stocks?.c || '加载中'}</h1>
    </>
  )
}

export default StockHeader 

内容的提问来源于stack exchange，提问作者user16645351