☰

React - 関数コンポーネントを強制的に再レン​​ダリングするにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript reactjs react-functional-component
React - 関数コンポーネントを強制的に再レン​​ダリングするにはどうすればいいですか? 質問する

関数コンポーネントがあり、それを強制的に再レン​​ダリングしたいと考えています。

どうすればいいでしょうか?
インスタンスがないのでthis、 を呼び出すことができませんthis.forceUpdate()。

ベストアンサー1

�� Reactフックを使用して

���� 使用方法useReducer（短い回答）

const [, forceUpdate] = useReducer(x => x + 1, 0);

React FAQより

使い方：

function MyComponent(){
  const [, forceUpdate] = useReducer(x => x + 1, 0);

  return (
    <div onClick={forceUpdate}>
      Click me to refresh
    </div>
  );
}

���� 使用useState（より明確な回答）

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 state to force render
    // A function that increment ���� the previous state like here 
    // is better than directly setting `setValue(value + 1)`
}

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>
    );
}

デモはここで見つかります。

上記のコンポーネントは、useForceUpdatereact state hook を使用するカスタムフック関数 ( )を使用していますuseState。これは、コンポーネントの状態の値を増分し、React にコンポーネントを再レンダリングするように指示します。

編集

この回答の古いバージョンでは、スニペットはブール値を使用し、それを切り替えていましたforceUpdate()。回答を編集したので、スニペットはブール値ではなく数値を使用します。

なぜ？（あなたは私に尋ねるでしょう）

forceUpdate()なぜなら、一度、2 つの異なるイベントから my が 2 回続けて呼び出され、ブール値が元の状態にリセットされ、コンポーネントがレンダリングされないという事態が発生したからです。

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

おすすめ記事