Reactjs 在React上编写的两段代码之间有什么区别，其中包含useffect钩子和一些异步内容？_Reactjs_Async Await_React Hooks_React Testing Library_Use Effect

Reactjs 在React上编写的两段代码之间有什么区别，其中包含useffect钩子和一些异步内容？

reactjs

Reactjs 在React上编写的两段代码之间有什么区别，其中包含useffect钩子和一些异步内容？,reactjs,async-await,react-hooks,react-testing-library,use-effect,Reactjs,Async Await,React Hooks,React Testing Library,Use Effect,我写了一个服务来监控不同公司的股票信息。我有一个本地服务器作为“代理”，使数据处理更方便。我写了一段代码，它的功能是在第一次呈现组件之后，从服务器获取用户添加到其配置文件中的公司的数据（实际上用户还没有可能在我的服务中创建配置文件，所以我将数据保存到localStorage）。第一次实施： import React，{useffect，useState}来自“React”；从“axios”导入axios；从“./StockItem”导入{StockItem}；导出常量StocksList=

我写了一个服务来监控不同公司的股票信息。我有一个本地服务器作为“代理”，使数据处理更方便。我写了一段代码，它的功能是在第一次呈现组件之后，从服务器获取用户添加到其配置文件中的公司的数据（实际上用户还没有可能在我的服务中创建配置文件，所以我将数据保存到

localStorage

）。第一次实施：

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
从“./StockItem”导入{StockItem}；
导出常量StocksList=（）=>{
常量[库存，设置库存]=使用状态（[]）；
useffect（（）=>{
常量fetchStocks=async（）=>{
const userStocks=localStorage.getItem（'userStocks'）；
如果（！userStocks）{
返回；
}
const userStocksList=JSON.parse（userStocks）；
const stockSymbolsParam=userStocksList.join（'，'）；
const response=等待axios.get(
`http://localhost:8080/api/v1/stocks?stockSymbols=${StockSymbolParam}`
);
const{data:stocksResponse，status}=response；
如果（状态！==200）{
抛出新错误（“对API的请求无效”）；
}
const{stocksData}=stocksResponse；
设initialStocks=[]；
const processStockData=（stockData）=>{
常数{
符号，
数据：{
公司名称，
价格，
改变
},
}=股票数据；
常数存量={
公司：{
姓名:companyName,，
符号
},
价格，
改变
};
初始股票。推（股票）；
};
forEach（item=>processStockData（item））；
设置库存（prevState=>[…prevState，…initialStocks]）；
};
获取股票（）；
}, []);
返回(

{
stocks.map（stock=>{
返回(
)
})
}

)
};

当我使用这个的时候，我所有的测试都通过了。但是当我决定改变的时候为了fetchData函数的可重用性而拆分代码，有些东西坏了，尽管在我看来这两部分做的事情是一样的。新的：

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
从“./StockItem”导入{StockItem}；
导出常量StocksList=（）=>{
常量[库存，设置库存]=使用状态（[]）；
常量fetchStocks=async（符号）=>{
常量stockSymbolsParam=symbols.join（'，'）；
const response=等待axios.get(
`http://localhost:8080/api/v1/stocks?stockSymbols=${StockSymbolParam}`
);
const{data:stocksResponse，status}=response；
如果（状态！==200）{
抛出新错误（“对API的请求无效”）；
}
const{stocksData}=stocksResponse；
让resultStocks=[]；
const processStockData=（stockData）=>{
常数{
符号，
数据：{
公司名称，
价格，
改变
},
}=股票数据；
常数存量={
公司：{
姓名:companyName,，
符号
},
价格，
改变
};
结果库存推送（库存）；
};
forEach（item=>processStockData（item））；
返回结果存储库；
};
useffect（（）=>{
const userStocks=localStorage.getItem（'userStocks'）；
如果（！userStocks）{
返回；
}
const userStocksList=JSON.parse（userStocks）；
（异步（）=>{
const result=await fetchStocks（userStocksList）；
设置库存（prevState=>[…prevState，…result]）；
})();
}, []);
返回(

{
stocks.map（stock=>{
返回(
)
})
}

)
};

实际上，该服务仍然有效，它获取数据和显示库存的方式与以前相同，但是测试

StocksList

组件的测试失败了。测试是：

从“React”导入React；
从“axios”导入axios；
从'@testing library/react'导入{render}；
从“/StocksList”导入{StocksList}；
从“/FakerResponse”导入FakerResponse；
开玩笑的模仿（‘axios’）；
它（'应该在渲染后从本地存储中获取有关公司的股票数据'，异步（）=>{
（axios.get as jest.Mock）.mockImplementationOnce（（url）=>{
常量符号=url.substr（url.indexOf（'='）+1.split（'，'）；
常量响应=伪造响应（符号）；
回报承诺。解决（回应）；
});
const fakeUserStocks=['WIX'，'EBAY'，'AAPL']；
setItem（'userStocks'，JSON.stringify（fakeUserStocks））；
const{getAllByTestId，rerender}=render（）；
localStorage.removietem（'userStocks'）；
等待预期（axios.get）。等待已催收的时间（1）；
重新加载（）；
const stockItems=getAllByTestId（'stock-item'）；
forEach（（userStock，i）=>{
expect（stockItems[i].innerHTML.indexOf（userStock））.not.toEqual（-1）；
});
});

消息test is failure with为：

✕ should fetch stocks data about companies from localStorage after render (30ms)

  ● StocksList testing › should fetch stocks data about companies from localStorage after render

    Unable to find an element by: [data-testid="stock-item"]

    <body>
      <div>
        <section
          class="stocksSection"
        >
          <ul
            class="stocksList"
            data-testid="stocks-list"
          />
        </section>
      </div>
    </body>

      35 |
      36 |     rerender(<StocksList />);
    > 37 |     const stockItems = getAllByTestId('stock-item');
         |                        ^
      38 |     fakeUserStocks.forEach((userStock, i) => {
      39 |       expect(stockItems[i].innerHTML.indexOf(userStock)).not.toEqual(-1);
      40 |     });

✕ 渲染后应从localStorage获取有关公司的股票数据（30毫秒）
● StocksList测试›应在渲染后从本地存储中获取有关公司的股票数据
无法通过以下方式找到元素：[data testid=“stock item”]

35 |
36 |重新加载（）；
>37 | const stockItems=getAllByTestId（'stock-item'）；
|                        ^
38 | fakeUserStocks.forEach（（userStock，i）=>{
39 | expect（stockItems[i].innerHTML.indexOf（userStock））.not.toEqual（-1）；
40 |     });

我想