TyepeScriptでReactRouterを扱う際に、URLパラメーターを取得するところで失敗した。

App.tsx

import React from 'react';

const Characters: React.FC<{}> = (props) => {
  return (
    <>
      {props.match.params.name}
    </>
  );
}

export default Characters;

エラーメッセージは
Property 'match' does not exist on type '{ children?: ReactNode; }'. TS2339

RouteComponentPropsを用いる

matchはpropsに渡るオブジェクトに定義されてない。
そこでRouteComponentPropsとpropsの型を結合することでmatchが渡される。

App.tsx

import React from 'react';
+import { RouteComponentProps } from 'react-router';


+//interfaceの結合
+type urlProps = {} & RouteComponentProps<{name: string}>;

const Characters: React.FC<urlProps> = (props) => {
  return (
    <>
      {props.match.params.name}
    </>
  );
}

export default Characters;

URLパラメーターが渡った

ちなみに...

VSCode上でRouteComponentPropsに左クリックしてGo to Definitionで定義ファイルを開くとmatchがプロパティにあることがわかる。

index.t.ts

export interface RouteComponentProps<Params extends { [K in keyof Params]?: string } = {},C extends StaticContext = StaticContext,S = H.LocationState>
  {
    history: H.History<S>;
    location: H.Location<S>;
    match: match<Params>;
    staticContext?: C;
  }

何度、くじけそうになったか…

React Hooksを使い始めた頃、CRAなどで作ったサイトはともかく

Gatsbyを使った時など、かなりの頻度でInvalid hook call warningに見舞われ、最悪の思いをした人も少なくないでしょう。

この記事では、Invalid hook call warningとなかよくなるための「いくつかのルール」を教えます。

※ 原因は、こちらを読んでください

https://ja.reactjs.org/warnings/invalid-hook-call-warning.html

Yarnを使う

「いろんなReactが混じっている」は、Yarnを使うことで解消されます。

yarn dedupeと打ってみてください。

error The dedupe command isn't necessary. `yarn install` will already dedupe.

yarn installとした時点でパッケージの重複がなくなりInvalid hook call warningの確率が減ります。

yarn workspaceを使う

複数のリポジトリを管理していると、下みたいにReactが被ります。

フォルダ構成

root
  ├ packageA - React@^16.13.2
  └ packageB - React@16.12.0

例えば、「packageBでカスタムフックを用意して、packageAで使っている」ような状況です。

packageA -> packageB (依存関係)

こうした状況で、Invalid hook call warningは起きやすいです。

こうした場合は、Yarn Workspaceを使いましょう。

少しフォルダ構成を変えましょう。

フォルダ構成

root
  └ packages
    ├ packageA - React@^16.13.2
    └ packageB - React@16.12.0

rootのフォルダにpackagesフォルダを作っただけです。

バージョンは揃えておきましょう

packageAとpackageBのReactのバージョンは、どちらかに揃えましょう。

例

cd packages/packageB

yarn upgrade React

yarn workspaceを導入しましょう

rootフォルダに移動しましょう

cd <path to root>

初期化します。

yarn init -y

package.jsonにworkspacesを足します。

package.json

{
   ...,
   workspaces: ["packages/*"]
}

＊＊

ここで、事前に各パッケージの node_modules / yarn.lock / package-lock.json を削除しておきましょう

＊＊

さて、rootにて

yarn

を実行します。

これで、Reactがルートフォルダのnode_modulesに集約され、Invalid hook call warning の確率が減ります。

Gatsbyでの Invalid hook call warning

GatsbyでInvalid hook call warningが起きたときは、何か別の原因が邪魔をしている場合があります。

とりあえず

gatsby build

と打ってみましょう。

そうすると「真のエラー」が出てくると思います。

それを調べ、直してから、もう一度 gatsby developで開発に戻りましょう。

おわりに

たぶん、ここまでやっても起こるときは起こるのですが、多少はエラーでスタックする時間を減らせると思っています。

お役に立ちますように。

ユニークなIDを付与したい

例えば、あるオブジェクトに対して、ファイル名などの被りによって処理に競合が発生してしまうとしましょう。

そんな時に使うパッケージがuuid。

使い方は皆さん下記参照。

uuid | npm

uuid 3系 -> 7.0.3にアップデート

importの仕方が変わります。
これをしないとdeprecationのWarningが出続けます。

console.js:39 Deep requiring like `const uuidv4 = require('uuid/v4');` is deprecated as of uuid@7.x. Please require the top-level module when using the Node.js CommonJS module or use ECMAScript Modules when bundling for the browser. See https://github.com/uuidjs/uuid#deep-requires-now-deprecated for more information.

importは以下のように変更します。

- import uuidv4 from 'uuid/v4';
+ import { v4 as uuidv4 } from 'uuid';

これで、Warningは消えます。

以上、久々に仕事で記事を書くネタがあったので戦闘力(Contributions)を上げるために投稿してみました。

export const Component = (props: Hoge) => {
  const [hoge, setHoge] = useState(null)
  useEffect(() => {
    setHoge(props)
    // componentWillUpdate
  }, [props])

  useEffect(() => {
    // componentDidUpdate
  }, [hoge])

  return (
    <div>{hoge}</div>
  )
}

propsを一旦stateに格納する処理を挟むことで実現している。
アンチパターンだったら教えて下さい。

export const Component = (props: Hoge) => {
  const [hoge, setHoge] = useState(null)
  useEffect(() => {
    setHoge(props)
    // componentWillUpdate
  }, [props])

  useEffect(() => {
    // componentDidUpdate
  }, [hoge])

  return (
    <div>{hoge}</div>
  )
}

propsを一旦stateに格納する処理を挟むことで実現している。
アンチパターンだったら教えて下さい。

  function nl2br(text) {
    var regex = /(\n)/g
    return text.split(regex).map(function (line) {
        if (line.match(regex)) {
            return React.createElement('br')
        }
        else {
            return line;
        }
    });
  }

            <Typography variant="p" align="center" color="textSecondary" paragraph>
            {  nl2br(KAKA.detail) }
            </Typography>

参考

https://qiita.com/kouheiszk/items/e7c74ab5eab901f89a7f