ReactJS で、useState の値を別のファイルから更新するにはどうすればよいですか?

Question

2 つの異なるファイルからオブジェクトの状態にアクセスして更新しようとしています。各ファイルにローカルの useState を使用すれば変更できますが、うまくいきません。

カスタムフックとローカル状態を使用して、さまざまな解決策を試しましたが、どれも問題を解決できませんでした。約 5 時間この問題で立ち往生し、本当に頭がおかしくなりそうでした。助けていただければ幸いです。素晴らしいです。

問題は、return ステートメントからフックを呼び出そうとしていることだと思いますが、それがレンダリングされる場所であるため、それを行う別の方法が思いつきません。

information.js:

<button class="active" onClick={() => useSetHero(hero)}>

hero.js:

export const useSetHero = (newHero) => {
    const UpdateHero = () => {
        const [hero, setHero] = useState(newHero);
        setHero(newHero);
    };

    戻り値 {UpdateHero};

}

現在受け取っているエラー メッセージは次のとおりです。 React フック「useHero」をコールバック関数で呼び出すことはできません。 React フックは、React 関数コンポーネントまたはカスタム React フック関数で呼び出す必要があります

Answer 1

フック内の関数ではなく、フック自体の状態を定義します。例えば：＃＃＃ リーリー

また、ここでは

initialHero と newHero の違いにも注意してください。前者は、フックが最初に呼び出されたときに最初の状態値を初期化するために使用されます: リーリー

後者は、

UpdateHero を呼び出すときに新しい値に更新するために使用されます: リーリー

上記のコードでは、マークアップ内でフックを直接呼び出していないことに注意してください。フックはコンポーネントの早い段階で呼び出されます (また、同じフックがレンダリングごとに同じ順序で呼び出されます)。フックによって返されたデータや関数は、後で使用できます。

---

いくつかのメモ:

1. hero はここでは使用されません。使用できるように、フックもその値を返す必要があると思います。
2. UpdateHero はここでは冗長ですが、setHero を直接返すことができます。

これらの問題は両方とも、これはあなたがやろうとしていることの非常に単純化された例にすぎず、実際のフックはこれより複雑であるためだと思います。ただし、これらの問題を考慮しない場合、上記のフックは次のように簡略化できます。 リーリー