为什么我的州需要这么长时间才能更新？答案

【问题标题】：Why my State is taking so long to update?为什么我的州需要这么长时间才能更新？
【发布时间】：2021-07-17 19:24:42
【问题描述】：

我在 useEffect 中使用了两个 API。一个是用于参数以及何时返回结果。我正在根据第一个 API 收到的参数数据数组获取主 API，然后无论我从主 API 获得的最终数据如何，我都将其设置为称为股票的状态。

问题是状态没有快速更新，它需要大约 10 秒的时间来更新，因此我无法渲染结果。我已经使用反应开发工具检查了一段时间后状态正在更新，并且我成功地从 API 获得了结果。

这里是代码。

const Base = (props) => {

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>

    
)

}

导出默认基础；

【问题讨论】：

您似乎正在拨打两个网络电话，一个接一个。根据这些服务的速度，您最终会遇到延迟。
setStocks(array) 将永远是 setStocks([])。然后您将获得异步调用的结果，然后您将获得 20 次辅助异步调用的结果，前提是服务器不会阻止您进行 DDoS 攻击。调用将一无所获，因为在等待 Axios 之前已经调用了 setStocks([])。此外，您正在使用 .map 而不从中返回任何内容

标签： javascript reactjs async-await use-effect use-state

【解决方案1】：

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

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

此外，您应该使用forEach 而不是map 来迭代数据而不需要返回值。

【讨论】：

【解决方案2】：

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

【讨论】：

响应给出了超过 3200 个对象数组。我该如何优化它？
嗯，通常 API 提供者应该有某种接口，指定哪些端点可用，以及您可以随这些请求发送哪些参数，例如页面/页面大小。