Javascript 为什么我的状态需要这么长时间才能更新？

我在useEffect中使用了两个API。一个是参数，当它返回结果时。我根据第一个API为params接收到的数据数组获取主API，之后，无论我从主API获得什么最终数据，我都将其设置为stocks状态

问题是状态更新不快，更新需要大约10秒的时间，因此我无法呈现结果。我已经使用react-Dev工具检查了状态是否在一段时间后更新，并且我成功地从API获得了结果

这是代码

常数基=（道具）=>{

const[stocks，setStocks]=useState（）；
useffect（（）=>{
常量数组=[]；
axios.get(`https://pkgstore.datahub.io/core/nyse-other-listings/nyse-listed_json/data/e8ad01974d4110e790b227dc1541b193/nyse-listed_json.json`)
。然后（响应=>{
response.data.slice（0,20）.map（item=>{
axios.get(`https://finnhub.io/api/v1/stock/metricsymbol=${item[“ACT Symbol”]}&metric=all&token=process.env.REACT\u APP\u token`）
。然后（（响应）=>{
array.push（响应）}）
})
})
.catch（err=>console.error（err））
固定器（阵列）
},[])
返回(
公司名称
象征
市值
现行价格
{
stocks！==未定义&stocks.length>0？
stocks&&stocks.map（项=>{
return{JSON.stringify（）}
//这里我得到了空[]
})
：{JSON.stringify（股票）}
}
)

}

---

导出默认基

实际上您正在进行第一个API调用，然后迭代响应以进行几个外部API调用。这只会导致长时间的操作，并且与特定的bug无关

最好的方法是重新设计API返回几个值，或者你应该考虑在接收响应的同时逐步更新状态。

---

此外，您应该在

map

上使用

forEach

来迭代数据，而不需要返回值。

但是，上面的答案应该足够了，我还要检查您是否可以在请求中发送一个参数来限制响应中返回的项的数量，而不是在前端切片数组。因为如果响应返回大量对象，可能会导致整体响应时间变慢。

您似乎在进行两次网络调用，一次接一次。取决于这些服务的速度，您将在您的端获得延迟。

setStocks（array）

将始终是

setStocks（[]）

。然后，您将获得异步调用的结果，然后您将获得20次辅助异步调用的结果，前提是服务器不会阻止您进行DDoS攻击。因为在等待Axios之前就已经调用了

setStocks（[]）

，所以将进行无需任何费用的调用。另外，您正在使用

.map

而不返回任何内容。响应将给出3200多个对象数组。如何对其进行优化？通常，API提供程序应该具有某种接口，指定哪些端点可用，以及可以随这些请求发送哪些参数，例如页面/页面大小。

const [stocks,setStocks] = useState();



useEffect(()=>{
  const array = [];
    axios.get(`https://pkgstore.datahub.io/core/nyse-other-listings/nyse-listed_json/data/e8ad01974d4110e790b227dc1541b193/nyse-listed_json.json`)
    .then(response => {


      response.data.slice(0,20).map(item =>{
        
         axios.get(`https://finnhub.io/api/v1/stock/metricsymbol=${item["ACT Symbol"]}&metric=all&token=process.env.REACT_APP_TOKEN`)
            .then((response) =>{

              array.push(response)})
           
      })
           
    })
    .catch(err => console.error(err))
   setStocks(array)
},[])


 return (
    <div>
    
    <div className="table_container">
         <table class="table">
         <thead>
           <tr>
             <th scope="col">COMPANY NAME</th>
             <th scope="col">SYMBOL</th> 
             <th scope="col">MARKET CAP</th>
             <th scope="col"> </th>
             <th scope="col">CURRENT PRICE</th>
           </tr>
         </thead>
         <tbody>
       
         {
          stocks !== undefined && stocks.length > 0? 
        
         stocks && stocks.map(item=>{
              return    <p>{JSON.stringify()}</p>  //here i am getting empty [] 
                       
             })
             :<h1>{JSON.stringify(stocks)}</h1>
             
             
         }
           
         </tbody>
       </table>
         </div>
    </div>

    
)