Thumbnailで発生している怒られについて

画像のLazyLoadと画面内にあるタグだけリンクを更新するようにしているため react-on-screen を使用している

TrackVisibility というReactコンポーネントをに任意のFCを渡すことで、そのコンポーネントが画面内にあるかどうかを検知できる

現在の実装ではTrackVisibilityに即席の関数(FCですらない)を渡しており、そこでsetStateを呼び出すような実装になっており、ここで怒られが発生している(下記エラーログ参照)

筋としてはTrackVisibilityにまともなFCを渡せば良さそう(useEffect を使う必要がありそう)だが、自分のローカル環境だと明らかに反応が鈍く(???)なってしまったのと、現状動いているのでそのままにしている

えらーろぐ

Warning: Cannot update a component (`Thumbnail`) while rendering a different component (`TrackVisibility`). To locate the bad setState() call inside `TrackVisibility`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at TrackVisibility (http://localhost:3000/_next/static/chunks/pages/search.js:275091:28)
    at Thumbnail (http://localhost:3000/_next/static/chunks/pages/search.js:2138:27)
    at a
    at div
    at div
    at div
    at div
    at _c (http://localhost:3000/_next/static/chunks/pages/search.js:3079:20)
    at div
    at _c (http://localhost:3000/_next/static/chunks/pages/search.js:2511:20)
    at li
    at ul
    at http://localhost:3000/_next/static/chunks/pages/search.js:2927:21
    at div
    at main
    at div
    at Layout (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1605943310586:602:27)
    at Search (http://localhost:3000/_next/static/chunks/pages/search.js:319335:21)
    at MyApp (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1605943310586:10704:24)
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1605943310586:781:47)
    at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1605943310586:885:23)
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1605943310586:12909:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1605943310586:13386:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1605943310586:13502:25)

naari3 / otomad-search

Thumbnailで発生している怒られについて #15

えらーろぐ