前提
React(Nextjs)で複数のサイトから商品情報をクローリングして,画面にその情報を表示するプログラムを作っています.
ボタンをクリックすることで(onClickに設定された)handleClick()が呼ばれ,クローリングが開始します.
setAllItems()がuseStateのset関数になります.
エラーが出力されているわけではないので,質問解決の原因が特定できておりません.
なにか分かることがありましたら,回答いただけると幸いです.
バックエンド(Golang)
詰まっていること
fetchでクローリングしてきたデータをuseStateのsetAllItems()で状態を更新していますが(
setItems(await crawleItems(baseSearchUrlWithColly))
setItems(await crawleItems(baseSearchUrlWithAgouch))
),片方のsetAllItems()が呼ばれたときは商品情報が再レンダリングされるのですが,2回目にsetAllItems()が呼ばれたときは更新されているものの,再レンダリングが行われません.
実現したいこと
2回目のsetAllItems()が呼ばれたときも,再レンダリングが行われるようにしたい.
該当のソースコード
Typescript
var crawledItems = new Map<string, Item[]>() const setItems = (items: Map<string, Item[]>) => { Object.keys(items).map((key: string, _: number) => { crawledItems[key] = items[key] }) setAllItems(crawledItems) } const crawleItems = async (baseUrl: string): Promise<Map<string, Item[]>> => { const url: string = await makeFetchUrl(baseUrl) console.log(url) return await fetchCrawlingAllItems(url) } const handleClick = async () => { setItems(await crawleItems(baseSearchUrlWithColly)) setItems(await crawleItems(baseSearchUrlWithAgouch)) console.log(crawledItems) }
試したこと
setAllItems()の引数となるMap変数crawledItemsには,2回目の再レンダリングで表示したいすべての情報が格納できています.
Agouchを用いたクローリングは毎回遅く,Collyの場合よりも4秒ほど時間差があります
(バックエンド側で4秒sleep処理があります.)
setItems(await crawleItems(baseSearchUrlWithColly))
setItems(await crawleItems(baseSearchUrlWithAgouch))
の片方をコメントアウトにし,1回目の再レンダリングが両方の場合で行われること
0 コメント