Javascript 在react中同时获取多个对象 从“React”导入{React，useffect，useState}； 从“ag grid react”导入{AgGridReact}； 导入“ag-grid-community/dist/styles/ag-grid.css”； 导入“ag-grid-community/dist/styles/ag-theme-balham.css”； 常量FetchStocks=（）=>{ const API_KEY=“W2QUHNG3L8W8A5VN”； const[data，setData]=useState（{StockSymbols:null，StockName:null，StockIndustry:null}） const[MSFT，setMSFT]=useState（{MSFTSymbols:null，MSFTName:null，MSFTIndustry:null}） const[AA，setAA]=useState（{AASymbols:null，AAName:null，AAIndustry:null}） useffect（（）=>{ 取回(`https://www.alphavantage.co/query?function=OVERVIEW&symbol=IBM&apikey=${API_KEY}`） .那么( 功能（响应）{ 返回response.json（）； } ) .那么( 功能（数据）{ 设置数据({ StockSymbols:数据['Symbol']， 股票名称：数据['Name']， 证券业：数据[“行业”] }) }) }, []) useffect（（）=>{ 取回(`https://www.alphavantage.co/query?function=OVERVIEW&symbol=MSFT&apikey=${API_KEY}`） .那么( 功能（响应）{ 返回response.json（）； } ) .那么( 功能（MSFT）{ 塞姆斯夫特({ MSFTSymbols:MSFT['Symbol']， MSFTName:MSFT['Name']， MSFTIndustry:MSFT[“工业”] }) }) }, []) useffect（（）=>{ 取回(`https://www.alphavantage.co/query?function=OVERVIEW&symbol=AA&apikey=${API_KEY}`） .那么( 功能（响应）{ 返回response.json（）； } ) .那么( 功能（AA）{ setAA({ AA符号：AA['Symbol']， AA名称：AA['Name']， AA行业：AA[“行业”] }) }) }, []) 常数表={ 栏目：[ {标题名称：“符号”，字段：“符号”}， {headerName:“名称”，字段：“名称”}， {标题名称：“工业”，字段：“工业”} ], 行数据：[ {symbol:`${data.StockSymbols}`，名称：`${data.StockName}`，行业：`${data.StockIndustry}`， {symbol:`{MSFT.MSFTSymbols}`，名称：`{MSFT.MSFTName}`，行业：`{MSFT.MSFTIndustry}`， {symbol:${AA.AASymbols}，name:${AA.AAName}，industry:${AA.AAIndustry}} ], } 让集装箱式={ 身高：500， 宽度：700 } 返回( ) }; 出口股票；

这是我用来创建一个显示股票的表格的代码

我正在使用Alpha Vantage API进行此操作，并希望获取多个股票以显示在表中

然而，我遇到了麻烦，因为我多次使用useEffect来获取不同股票的元素

有什么办法可以把它缩短吗

---

例如，我想在表中显示三种股票（IBM、MSFT、AA）的符号、名称和行业。

是。。。你可以利用Promise.all（）的优势

函数getData（）{ 让firstAPICall=fetch(`https://www.alphavantage.co/query?function=OVERVIEW&symbol=IBM&apikey=${API_KEY}`）； 让我们一起去拿(`https://www.alphavantage.co/query?function=OVERVIEW&symbol=AA&apikey=${API_KEY}`）； 承诺所有（[firstAPICall，secondAPICall]） .then（values=>Promise.all（values.map（value=>value.json（））） 。然后（最终值=>{ 设firstAPIResp=finalVals[0]； 设secondAPIResp=finalVals[1]； renderHTML（第一个APIREP，第二个APIREP）； }); }

import { React, useEffect, useState } from 'react';
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";

const FetchStocks = () => {
const API_KEY = "W2QUHNG3L8W8A5VN";
const [data, setData] = useState({ StockSymbols: null, StockName: null, StockIndustry: null })
const [MSFT, setMSFT] = useState({ MSFTSymbols: null, MSFTName: null, MSFTIndustry: null })
const [AA, setAA] = useState({ AASymbols: null, AAName: null, AAIndustry: null })

useEffect(() => {

    fetch(`https://www.alphavantage.co/query?function=OVERVIEW&symbol=IBM&apikey=${API_KEY}`)
        .then(
            function (response) {
                return response.json();
            }
        )
        .then(
            function (data) {
                setData({
                    StockSymbols: data['Symbol'],
                    StockName: data['Name'],
                    StockIndustry: data['Industry']
                })
            })
}, [])

useEffect(() => {

    fetch(`https://www.alphavantage.co/query?function=OVERVIEW&symbol=MSFT&apikey=${API_KEY}`)
        .then(
            function (response) {
                return response.json();
            }
        )
        .then(
            function (MSFT) {
                setMSFT({
                    MSFTSymbols: MSFT['Symbol'],
                    MSFTName: MSFT['Name'],
                    MSFTIndustry: MSFT['Industry']
                })
            })
}, [])

useEffect(() => {

    fetch(`https://www.alphavantage.co/query?function=OVERVIEW&symbol=AA&apikey=${API_KEY}`)
        .then(
            function (response) {
                return response.json();
            }
        )
        .then(
            function (AA) {
                setAA({
                    AASymbols: AA['Symbol'],
                    AAName: AA['Name'],
                    AAIndustry: AA['Industry']
                })
            })
}, [])

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

    rowData: [
        { symbol: `${data.StockSymbols}`, name: `${data.StockName}`, industry: `${data.StockIndustry}` },
        { symbol: `${MSFT.MSFTSymbols}`, name: `${MSFT.MSFTName}`, industry: `${MSFT.MSFTIndustry}` },
        { symbol: `${AA.AASymbols}`, name: `${AA.AAName}`, industry: `${AA.AAIndustry}` }
    ],
}

let containerStyle = {
    height: 500,
    width: 700
}

return (
    <div>
        <div
            className="ag-theme-balham"
            style={containerStyle}
        >
            <AgGridReact
                columnDefs={table.columns}
                rowData={table.rowData}
                pagination={true}
            />
        </div>
    </div>
)
};

export default FetchStocks;