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

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

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

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

Q&A

解決済

1回答

856閲覧

React Hooks エラー解決方法

ktaaa

総合スコア59

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

0グッド

0クリップ

投稿2020/02/20 05:36

uncaught Invariant Violation: Rendered more hooks than during the previous render.
上記のエラーが出てたので調べたら条件分岐のとこでuseReduserを使っているのが原因でした。
useTrの処理の中でuseReduserを使っています。

if (category()) { );の条件分岐をなくしてuseTr()の中で三項演算子を使い条件分岐をしたのですが return useTr( category() ? Params(category().useId): null, { Token: null }, [category().useId], ); return initialState;

 と書いてもuseTrの処理が絶対呼ばれてしいます。どういうふうに書いたらcategory()がfalseの時にinisialStateを返してtruの時はuseTrを呼ぶことができますか?

const category = (): Users | null => { const ttg = category.find((i) => i.categoryId === category.id); return (ttg != null) ? ttg : null; }; const Params = (userId: number) => Object.assign({}, params, { userId }); if (category()) { return useTr( Params(category().useId), { Token: null }, [category().useId], ); } return initialState;

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

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

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

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

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

maisumakun

2020/02/20 05:49

useTrはどのようなHookなのでしょうか。
ktaaa

2020/02/20 05:56

どのような?? useTrのコードを載せないと解決できないでしょうか?? 業務用なのであんまり見せたくないのですが
guest

回答1

0

ベストアンサー

useTrの処理が絶対呼ばれてしいます

  • 呼ばれても問題ないようなHooksを作る
  • コンポーネントごと「Hooksを入れるコンポーネント」「入れないコンポーネント」で条件分岐させる

の2つに1つです。「Hooksで書く」ということは、「入れたコンポーネントでは絶対に実行される」ことと同義です。

投稿2020/02/20 06:03

maisumakun

総合スコア146018

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

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

ktaaa

2020/02/20 06:07

「Hooksを入れるコンポーネント」で条件分岐させるとはどういうことなのでしょうか?
maisumakun

2020/02/20 06:09

<ComponentWithHook>と<ComponentWithoutHook>を用意して、条件に応じてどちらをrenderさせるか選ぶ、ということです。 (もっとも、Hookの側で呼び出されても問題ないようにするほうが適切かと思います)
ktaaa

2020/02/20 06:13

上記のだとこのコンポーネントで条件分岐するのではなく、trueだったらこのコンポーネントを呼び falseだったら別のコンポーネントを呼ぶということでしょうか?
maisumakun

2020/02/20 06:14

そうですね、Hookをかける部分をサブコンポーネントに切り出すようなイメージです。
ktaaa

2020/02/20 06:21

それでも結局 if (category()) { return useTr( Params(category().useId), { Token: null }, [category().useId], ); } みたいに条件分岐するのでuseTrがifの中に入ってしまう気がするのですが
maisumakun

2020/02/20 06:31 編集

return category() ? <ComponentWithHook>: <ComponentWithoutHook>;のような感じです(useTrはComponentWithHookの中でだけ使います)。
ktaaa

2020/02/20 06:45

上記のようにするとコンポーネントの中にuseTrがあるものとないもののコンポーネントがあるだけで他の処理が全部同じになってしまうのですが、それはもう設計が悪いということですよね?
maisumakun

2020/02/20 06:46

> 上記のようにするとコンポーネントの中にuseTrがあるものとないもののコンポーネントがあるだけで他の処理が全部同じになってしまうのですが では、useTrと関係ない部分をさらにサブコンポーネントに切り出しましょう。両者で使い回せます。
maisumakun

2020/02/20 06:49

(余計なところでuseTrを呼び出しても、「多少処理が走るだけで、特に副作用がない」ようでしたら、余計なHooksによる処理負荷は無視してかけっぱなしにするという選択肢も、もちろんありです)
ktaaa

2020/02/20 06:57

なるほどわかりました!!!! return category() ? <ComponentWithHook>: <ComponentWithoutHook>;のような感じです(useTrはComponentWithHookの中でだけ使います)。とあるのですが、このように条件分岐すると return inisialStateはどのように書いたらいいのでしょうか?
maisumakun

2020/02/20 06:59

すみません、これ自体がHooksの中だったのですね。 (不要な場面でuseTrを呼びたくない理由はどのようなものでしょうか)
ktaaa

2020/02/20 08:38

(不要な場面でuseTrを呼びたくない理由はどのようなものでしょうか)とはどういうことでしょうか? if (category()) {ではなければuseTrを返さずにsnishiakStateを返したいです
maisumakun

2020/02/20 08:40

> if (category()) {ではなければuseTrを返さずにsnishiakStateを返したいです それだけでいいのなら、useTr()を常に呼んで結果を変数に受けておいて、返り値を返すところで選べばいいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問