前提
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ファイルのコード記述量がどんなに多くなっても同じファイルにまとめておくのが普通なのでしょうか?
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー