React Hooks内のUseStateで定義した変数を別ファイルで使う方法

Question

Reactのフロントエンドでのtextareaへのインプットを、jsのバックエンドに回して扱おうとしています。
textareaへのインプットは、UseStateのnameに入るようにしています。
ここでどのようにnameをexportすればいいかわからず困っています。

React

const hoge => {
  const [name, setName] = useState("");

   const someNotRelatedFunc => {

  }

return (
  something
  );
}

export default hoge

現在は上記のようにしています。

Comments

[maisumakun]

「バックエンド」とは、サーバサイドのことでしょうか？それとも、Electronなどのアプリを開発していて、同じコード内にバックエンドがある状況でしょうか？

[neoz]

サーバーサイドです。このtextareaに入力した文字列をjsのapiファイルに送り、その文字列を使ってGETメソッド内でデータを呼ぼうとしています。

[maisumakun]

「そのコンポーネント内からAjaxリクエストを投げる」という選択肢は取れない状況ですか？

[neoz]

おっしゃる意味を正しく解釈できていないかもしれないですが、GETリクエスト自体はそのコンポーネントから呼べています。
ただ、GET, POST, PUT...等を呼んだときに何をするかのhandler(routerというのでしょうか)はやはり別ファイルで定義せざるを得ず、そのGET routeで、db兼検索のようなサービスの関数を呼ぶ際に、textareaの語句で指定した検索結果を取得したい、というのが非常にわかりにくいかもしれないですが、趣旨となります。

Answer 1

そのGET routeで、db兼検索のようなサービスの関数を呼ぶ際に、textareaの語句で指定した検索結果を取得したい

でしたら、値を使う場所でuseStateを使ってnameとsetNameを用意して、この2つをtextareaのある場所まで（propあるいはcontextで）引き回してください。

（基本的に、useStateで宣言した箇所より上位のコンポーネントからは、その値は使えません）

Comments

[neoz]

ありがとうございます、ただ値を使うファイルはrouterとしてのただのJSファイルで、react componentではないのですが、その場合だとどうなるでしょうか？

[maisumakun]

React外からはどうしようもない（ルーティング処理もReact内から実行してください）、というのが教科書的な回答です。

（横紙破りでどうにかする方法も考えられますが、あまりおすすめはしません。）

[neoz]

ありがとうございます。ご指摘のおかげで、自分の発想ではダメだとわかりまして、結局GET methodのreq.queryにtextareaの文字を入れたUseStateのnameを突っ込んで裏まで引き回し一応の解決をみました。