Javascript 我可以使用多个api请求来填充React组件中的数据吗？

这很难解释。我有两个来自同一来源的API请求，但响应都包含我需要的内容。当用户键入符号时，我试图在屏幕上填充信息，但是当我从条件语句返回信息时，我无法获得显示的信息。我试着写出多个条件语句，但似乎不知道该怎么做。谁能给我指出正确的方向吗

这是我的密码：

// Here are the two urls that contain the data I need

const urls = [
            `https://api.iextrading.com/1.0/ref-data/symbols`,
            `https://api.iextrading.com/1.0/tops`
        ]


        let requests = urls.map(url => fetch(url))
        Promise.all(requests)
            .then(responses => {
                return Promise.all(responses.map(response => response.json()));
            }).then(responses => {
                this.setState({
                    stockSymbol: responses[0],
                    marketData: responses[1]

                })
                console.log(this.state.stockSymbol)
                console.log(this.state.marketData)
            })

    }


    render() {
        const { stockSymbol, userInput, marketData } = this.state

        // here is where i map out the response for the 2nd url to populate info that goes in the conditional statement

const markets = marketData.map(market => {
            return market

        })

        return (
            <div className="enterstock">
                <h1 className="title">Enter Stock Symbol</h1>
                <span className="symbol">{this.state.userInput}</span>
                <form className="inputfields" onSubmit={this.getSymbol}>
                    <input type="text" className="symfields" name="symbolname" onChange={this.typeSymbol}></input>
                </form>
                {stockSymbol.map((stock, i) => {
             

// here is where if the user inputs a stock symbol, the name of the company shows up,
               but here is where i want information from the 2nd url to populate the my return 
              when a user inputs a symbol

                    if (userInput === stock.symbol) {
                        return (
                            <ul className="symboldescription" key={i}>
                                <li key={i}>{stock.name}</li>
                                <li key={i}>{markets.volume}</li>
                            </ul>,
                            console.log(markets.symbol)
                        )
                    }
                })}
            </div>
        )

    }
}

//下面是两个包含我需要的数据的URL
常量URL=[
`https://api.iextrading.com/1.0/ref-data/symbols`,
`https://api.iextrading.com/1.0/tops`
]
let requests=url.map（url=>fetch（url））
承诺。所有（请求）
。然后（回答=>{
返回Promise.all（responses.map（response=>response.json（））；
})。然后（回答=>{
这是我的国家({
stockSymbol:响应[0]，
marketData:回应[1]
})
console.log（this.state.stockSymbol）
console.log（this.state.marketData）
})
}
render（）{
const{stockSymbol，userInput，marketData}=this.state
//这里是我映射第二个url的响应以填充条件语句中的信息的地方
const markets=marketData.map（市场=>{
回报市场
})
返回(
输入股票符号
{this.state.userInput}
{stockSymbol.map（（股票，i）=>{
//在这里，如果用户输入股票符号，就会显示公司名称，
但这里是我想从第二个url中获取信息以填充我的报税表的地方
当用户输入一个符号时
if（userInput==stock.symbol）{
返回(

{stock.name}
{markets.volume}
，
控制台.日志（市场.符号）
)
}
})}
)
}
}

您可以通过对marketData执行

查找

和对股票数据执行

筛选

来解决此问题。我已经附上了工作代码片段，你不需要过复杂的条件

希望这有帮助：）

class Thingy扩展了React.Component{
构造函数（）{
超级（）；
此.state={
股票代码：[]，
用户输入：“”，
marketData:[]，
};
}
componentDidMount（）{
常量URL=[
`https://api.iextrading.com/1.0/ref-data/symbols`,
`https://api.iextrading.com/1.0/tops`,
];
让requests=url.map（（url）=>fetch（url））；
承诺。所有（请求）
。然后（（回答）=>{
返回Promise.all（responses.map（（response）=>response.json（））；
})
。然后（（回答）=>{
这是我的国家({
stockSymbol:响应[0]，
marketData:回应[1]，
});
});
}
类型符号=（e）=>{
这是我的国家({
用户输入：e.target.value，
});
};
render（）{
const{stockSymbol，userInput，marketData}=this.state；
常量filteredSymbols=stockSymbol.filter(
（sym）=>sym.symbol==用户输入
);
const foundMarket=marketData.find(
（市场）=>market.symbol==用户输入
);
返回(
输入股票符号
{this.state.userInput}
{filteredSymbols.map（（股票，i）=>{
返回(

股票名称：{Stock.Name}
相关市场容量：{foundMarket.Volume}

);
})}
);
}
}
ReactDOM.render(
,
document.getElementById（“应用程序”）
);

您想如何处理
marketData
？Plz，您能显示此组件的所有代码吗？您是否从
Promise.all（）
检索数据？如果有，您能给我看一下数据
响应[0]，响应[1]
？@Avanthika Hi，我想从marketData数组中提取卷，并将其放入条件语句中。@Michael Hi，我可以。您好，这就是我要找的！非常感谢你。如果你不介意的话，你能告诉我你的思考过程以及你是如何想出这个解决方案的吗。我认为一个符号只能有一个相关的市场——我们将从市场集合中找到一个单一的对象。所以我使用了
Array.prototype.find
，2。我以为你只是想显示与他们输入的符号相关联的股票，所以我选择了股票数据上的
Array.prototype.filter
，而不是
Array.prototype.map
。