如何在反应中使用获取的 const 值？答案

【问题标题】：How can I use fetched const value in react?如何在反应中使用获取的 const 值？
【发布时间】：2021-07-30 08:20:14
【问题描述】：

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} 一起用于返回部分时，

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

我需要做什么才能使用它们？

【问题讨论】：

您能否分享一个完整的Minimal, Complete, and Reproducible 代码示例，以便我们可以看到此返回在哪里以及您在哪里看到任何未定义的内容？什么都没有过去，什么也没有出现在哪里？
你怎么称呼它？
我只是想检查一下它是否正常工作。
return (
{StockSymbols}, {StockName}, {StockIndustry}
)
所以我直接把他们叫到了页面。

标签： javascript node.js reactjs fetch-api

【解决方案1】：

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

创建组件状态

const [data, setData] = useState({StockName: null, StockSymbols: null, StockIndustry: null})

在 useEffect 挂钩中移动 fetch(API_Call)。（componentDidMount 以防不使用钩子）

useEffect(() => {

fetch(API_Call)
    .then(
        function (response) {
            return response.json();
        }
    )
    .then(
        function (data) {
            setData({
               StockName: data['Symbol'],
               StockSymbols: data['Name'],
               StockIndustry: data['Industry']
            })
        })
}, [])

在 JSX 中使用组件状态

return (<>
        <p>{data.StockName}</p>
        <p>{data.StockSymbols}</p>
        <p>{data.StockIndustry}</p>
       </>

【讨论】：

【解决方案2】：

如果您的目标是：

获取 React 组件挂载的数据
然后在 UI 中显示

您需要保留一些重新渲染组件的状态。所以对你来说，这可能意味着在你的生命周期方法/钩子中将数组初始化为const [StockIndustry, setStockIndustry] = useState([]); 和setStockIndustry([...StockIndustry, data['Symbol']];。简单地推送到数组不会重新渲染组件。

【讨论】：

我需要为此使用 useState
如果您正在使用功能组件并且只是希望它能够编译，这是一个很好的第一步 imo。
我正在尝试创建一个表格并使用表格中的那些元素
抱歉，您能再帮我一件事吗？
React Hook useEffect 缺少依赖项：'API_Call'。要么包含它，要么移除依赖数组