typescriptでuseStateを関数の引数に渡したい

Question

前提

TypeScriptでuseStateのXXX及びsetXXXを別の関数オブジェクトに引数として渡す処理をいくつか書いて試している際、

渡し手:

function App(){
const [left,setLeft]=useState(<></>);
Left1(setTest);

受け取り手:

function Left1(setTest:(value: React.SetStateAction<JSX.Element>) => void){
setTest(<></>);

コンパイルエラーは発生しませんでしたが、ブラウザで確認すると上のコードの一行下のエラーが発生しないであろう行をエラー発生源として表示し、処理が中断されていました。
念のため、そのエラー発生源として指摘された部分を削除してみたところ、そのまた一行下のエラーが発生していなかった行がエラーとして指摘されたためコンソールのエラー出力のミスだと思い、一番怪しい処理を今回質問内容として投稿しました

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Comments

[maisumakun]

> ブラウザで確認するとエラーが発生していて、処理が中断されていました。

そのコードが原因だと、どのように確認しましたか？

[yutadd]

すみません、たしかにエラーの発生源として、スタックトレースに指摘される部分は、実際のコードのsetText(<></>)の一行下と指摘されますが、その該当業を消すとまたそのひとつ下の行が指摘されるため、エラーの表示ズレだと推測し、一番怪しい処理を今回質問として記載しました。

[maisumakun]

Left1は通常の関数でしょうか、それとも関数コンポーネントでしょうか？

[maisumakun]

> その該当業を消すとまたそのひとつ下の行が指摘されるため

もしかして、当該の2行はuse***の呼び出しではありませんか？

[yutadd]

はい、そのとおりでございます。
しかし、この2行は元々エラーが出ていない行でして、この受け渡しの処理をすることで、エラー発生源としてマークされました

[yutadd]

function Left1(){と定義し、Left1(setText)という形で利用呼び出ししています。
しかし、呼び出しのみで、帰り値を
domに追加する処理はまだ書いていません。

Answer 1

しかし、この2行は元々エラーが出ていない行でして、この受け渡しの処理をすることで、エラー発生源としてマークされました

そのエラー表示は全く正しいです。

Hookの使われた関数コンポーネントを、Left1(setTest)のように普通の関数として呼び出すことはできません。setStateとは全く関係なく、関数コンポーネントの使い方の問題です。

Comments

[maisumakun]

> Left1(setText)という形で利用呼び出ししています。

その使い方が正しくありません。<Left1 />のように、JSXから呼んでください。

[yutadd]

すみません、ありがとうございます、移動後修正してみます。
呼び出し方は<Left1 setTest={setTest}/>このような形でよろしいでしょうか。

[maisumakun]

関数コンポーネントの引数はオブジェクトで来ます。コンポーネントサイドで、{}でspreadする、プロパティ参照するなどが必要です。

[yutadd]

すみません、スプレッド構文をオブジェクトとして渡された関数にどのように使うのかわかりません。
とりあえず、
呼び出し側を<Left1 st={setTest} />
受け取り側をfunction Left1(setTest: (value: React.SetStateAction<JSX.Element>) => void){
に変更したところ、呼び出し側でコンパイルエラー``` error
'{ st: Dispatch<SetStateAction<Element>>; }' を型 'IntrinsicAttributes & ((value: SetStateAction<Element>) => void)' に割り当てることはできません。
プロパティ 'st' は型 'IntrinsicAttributes & ((value: SetStateAction<Element>) => void)' に存在しません。ts(2322)
```が発生しました。

[maisumakun]

function Left1(setTest: (value: React.SetStateAction<JSX.Element>)という引数が間違いです。

この場合、関数コンポーネントの引数には{st: setStateの関数}のようなオブジェクトが渡されますので、オブジェクトまるごと受け取ってstプロパティを使うなり、spreadするなりしてください。

[yutadd]

すみません、
オブジェクトとして受け渡しするために、以下のように修正してみたところ、エラーが発生しました
渡し手を
export type Props={
st:type;
}
function App(){
const [left,setLeft]=useState(<></>);
var props:Props={st:setTest};
<Left1 value={props} />
受け取り手を
import Props from "../App"
function Left1(value:Props){
value.st(<></>);

とすると、受け取り手の２行目で'Props' は値を参照していますが、ここでは型として使用されています。'typeof Props' を意図していましたか?ts(2749)とエラーが起き、
受け取り手２行目をfunction Left1(value:any){にすると、コンパイルエラーは起きませんが、ブラウザーで開いた際、st is not a functionと出てきて処理が中断されてしまいます。

[maisumakun]

渡す側では st={setTest}の書き方で問題ありません。オブジェクトに詰めるのはReact内部で行われます。

[yutadd]

大変ありがとうございました！
おっしゃる通り、
function App(){
const [XXX,setXXX]=useState(<></>)
return(<Left1 setXXX={setXXX} />)
}
function Left1(value:any){
value.setXXX(<></>)
}
とすることで解決しました！