質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

564閲覧

React カスタムフックについて

shunta80

総合スコア96

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/06/07 09:05

前提

APIで取得したデータを画面表示させています。
そこからクリックされた条件によって再度データ取得して表示画面を切り替える関数が複数あります。

実現したいこと

今は1つのファイルに全ての関数をまとめていますが一部の関数を別ファイルに記載したい

発生している問題・エラーメッセージ

各関数で同一のstateを更新しているのでそもそも別ファイルに記載できるのかがわからない

該当のソースコード

function Tokyo() { const [state, setstate] = useState([]); // 各関数でこのstateを更新する useEffect(() => { axios .get(`http://webservice.recruit.co.jp/hotpepper/gourmet/v1/format=json&key=***&large_area=Z011`) .then(function (nn) { setstate(nn.data.results.shop); }) .catch((error) => console.log(error)); }, []); const areachange =useCallback( () => { // この関数のみ別ファイルに記載できるのか axios.get(`/http://webservice.recruit.co.jp/hotpepper/gourmet/v1/format=json&key=***&large_area=Z012`) .then(function (nn) { setstate(nn.data.results.shop); }) .catch((error) => console.log(error)); },[]); const click =useCallback( () => { // この関数を別ファイルに記載する形でも可 axios.get(`http://webservice.recruit.co.jp/hotpepper/gourmet/v1/format=json&key=***&private_room=1`} .then(function (nn) { setstate(nn.data.results.shop); }) .catch((error) => console.log(error)); },[]); return( <button onClick={areachange}>条件変更1</button> <button onClick={click}>条件変更2</button> ) } export default Tokyo;

試したこと

別ファイルで新たに同じstateを作成する方法はできませんでした。
そのためコンポーネント化と同じ容量でpropsを別ファイルへ受け渡すことができれば実装ができると思いました。

そもそも同じstateを更新する関数は1ファイルのコード記述量がどんなに多くなっても同じファイルにまとめておくのが普通なのでしょうか?

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2022/06/07 09:27

「同じ state」というのが、ある画面で API から取得した値を、別の画面でも再取得することなく利用したい、という意味なら、redux とかの出番では…。
guest

回答1

0

ベストアンサー

そこからクリックされた条件によって再度データ取得して表示画面を切り替える関数が複数あります。

指定するURLだけ違う状況なら、URL以外の部分を1つの関数にまとめる(useCallback)、という形が合理的かなと思いました。

投稿2022/06/07 09:09

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問