• 内容

Assignments to the 'canvas' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect.eslintreact-hooks/exhaustive-deps

React Hook useEffect 内からの「canvas」変数への割り当ては、レンダリングのたびに失われます。値を長期間保持するには、値を useRef フックに保存し、変更可能な値を '.current' プロパティに保持します。それ以外の場合は、この変数を useEffect.eslintreact-hooks/exhaustive-deps 内で直接移動できます。

わからん。思考停止するのでBingさんに言い換えてもらうと

この文章は、useEffectフックの中でcanvasという変数に値を入れていることについて警告しています。useEffectフックは、コンポーネントが表示された後に実行されるので、その中で変数に値を入れても、次にコンポーネントが表示されるときには消えてしまいます。だから、useRefフックを使って、canvasという変数の値をずっと保持できるようにしましょう。useRefフックは、currentというプロパティに値を入れたり取り出したりできるオブジェクトを作ってくれます。もしくは、useEffectフックの中でcanvasという変数を使わないようにしましょう。

• 該当ファイル

Three.tsx

• 該当箇所

const Three: NextPage = () => {
    let canvas: HTMLElement | null;

    useEffect(() => {
        if (canvas) return;

        canvas = document.getElementById('canvas'); // ここ

• 対処

useEffect内でreturnで返すような変数定義を行うなってこと？

useRefを使って値を保持できるようにすればいい。

結論　こうした

const Three: NextPage = () => {

    const canvasRef = useRef<HTMLElement | null>(null); // 型指定する

    useEffect(() => {
        if(canvasRef.current) return;　// null以外の場合何もしない、これないと無限ループみたいになる
        canvasRef.current = document.getElementById('canvas');

あとはcanvasになってた部分をcanvasRef.currentに変更

JavaScript, React固めないとな…

https://not-equal.dev/ ↑めちゃくちゃ面白そう、PC買ったばっかだから金銭的にきついかも…

参考URL

https://qiita.com/hinako_n/items/d08a43674afb5969549b#値の保持に使う場合の型付け

useRefにも２種類あるよ

TOP PAGE