質問

関数コンポーネントがあるのですが、強制的に再レンダリングさせたいのです。

どうすればよいのでしょうか？

インスタンスがないため this を呼び出すことができません。 this.forceUpdate() .

解決方法は？

???? を使用することができます。 Reactフック

リアクトフックを使用することで useState() を関数コンポーネントの中で使用することができます。

useState() は、2つのものの配列を返します。

1. 現在の状態を表す値。
2. セッターです。値を更新するために使用します。

セッターで値を更新すると、ファンクションコンポーネントの再レンダリングが強制されます。 ,

と同じように forceUpdate がそうです。

import React, { useState } from 'react';

//create your forceUpdate hook
function useForceUpdate(){
    const [value, setValue] = useState(0); // integer state
    return () => setValue(value => value + 1); // update the state to force render
}

function MyComponent() {
    // call your hook here
    const forceUpdate = useForceUpdate();
    
    return (
        <div>
            {/*Clicking on the button will force to re-render like force update does */}
            <button onClick={forceUpdate}>
                Click to re-render
            </button>
        </div>
    );
}

デモをご覧いただけます .

上記のコンポーネントは、カスタムフック関数( useForceUpdate を使用します。 useState . これは、コンポーネントの状態の値を増加させ、コンポーネントを再レンダリングするようにReactに指示します。

EDIT

この回答の古いバージョンでは、スニペットはブーリアン値を使用し、それを forceUpdate() . 今、私は私の答えを編集して、スニペットはブーリアンではなく、数字を使用しています。

どうして？ (私に訊くのだろう)

なぜなら、かつて私の forceUpdate() が 2 つの異なるイベントから続けて 2 回呼び出されたため、boolean 値が元の状態でリセットされ、コンポーネントがレンダリングされませんでした。

これは useState のセッター ( setValue ここで）。 React 前の状態と新しい状態を比較する。 で、状態が異なる場合のみレンダリングします。