时间戳

首页 > 解决方案 > 如何在反应中使用获取的 const 值？

javascript - 如何在反应中使用获取的 const 值？

问题描述

const fetchStocks = () => {
    const API_KEY = "dddd";
    const StockSymbol = 'IBM';
    const API_Call = `https://www.alphavantage.co/query?function=OVERVIEW&symbol=${StockSymbol}&apikey=${API_KEY}`;
    const StockSymbols = [];
    const StockName = [];
    const StockIndustry = [];



    fetch(API_Call)
        .then(
            function (response) {
                return response.json();
            }
        )
        .then(
            function (data) {
                console.log(data);

                StockSymbols.push(data['Symbol']);
                StockName.push(data['Name']);
                StockIndustry.push(data['Industry']);

                console.log(StockName)
                console.log(StockSymbols)
                console.log(StockIndustry)
            })

    // const table = {
    //     columns: [
    //         { headername: "Symbol", field: "symbol" },
    //         { headername: "Name", field: "name" },
    //         { headername: "Industry", field: "industry" }
    //     ],

    //     rowData: [
    //         { symbol: StockSymbols, name: StockName, industry: StockIndustry }
    //     ]
    // }

    return (
        <div>
            {StockSymbols}, {StockName}, {StockIndustry}
        </div>
    )
};

导出默认 fetchStocks；

我正在尝试使用 Alpha Vantage 获取股票名称、代码和行业。

当我对它们进行控制台记录时，它似乎正在工作。 控制台日志

但是当我尝试将它们与 {StockSymbols}、{StockName}、{StockIndustry} 一起用于返回部分时，

什么都没有过去，什么也没有出现。

我必须做什么才能使用它们？

标签： javascriptnode.jsreactjsfetch-api

解决方案

希望这是您正在寻找的，因为您的问题不够自我解释。

  1. 创建组件状态
const [data, setData] = useState({StockName: null, StockSymbols: null, StockIndustry: null})
  1. 移入fetch(API_Call)useEffect 挂钩。（componentDidMount 以防不使用钩子）
useEffect(() => {

fetch(API_Call)
    .then(
        function (response) {
            return response.json();
        }
    )
    .then(
        function (data) {
            setData({
               StockName: data['Symbol'],
               StockSymbols: data['Name'],
               StockIndustry: data['Industry']
            })
        })
}, [])
  1. 在 JSX 中使用组件状态
return (<>
        <p>{data.StockName}</p>
        <p>{data.StockSymbols}</p>
        <p>{data.StockIndustry}</p>
       </>

推荐阅读