クラスコンポーネントを関数コンポーネントに換えたい

Question

前提・実現したいこと

GatsbyのContentfulのスターターを使ってブログを構築しています。
上記スターターは全てクラスコンポーネントで書かれているため、関数コンポーネントに書き換えたいです。

発生している問題・該当のソースコード

単体でthisが使われている部分をどのように書き換えたらよいか分かりません。
例えばindex.jsでは下記のような形でthisが使われています。

class RootIndex extends React.Component {
  render() {
    const siteTitle = get(this, 'props.data.site.siteMetadata.title')
    const posts = get(this, 'props.data.allContentfulBlogPost.edges')
    const [author] = get(this, 'props.data.allContentfulPerson.edges')

    return (
      <Layout location={this.props.location}>
        <div style={{ background: '#fff' }}>
          <Helmet title={siteTitle} />
...

<Layout location={this.props.location}>のように具体的なプロパティが指定されている場合は、関数コンポーネントの宣言時にpropsとしてlocationを書けば機能すると思います。

試したこと

getメソッドでthisの何を使っているか調べて、使っているプロパティを特定すれば、関数コンポーネントのpropsに明示できるかと思いgetメソッドをググったのですが、下記のような配列の操作とjQueryのメソッドの説明しか見つけられませんでした。

• Map.prototype.get() - JavaScript | MDN
• .get() | jQuery 1.9 日本語リファレンス | js STUDIO

また、console.log(this)で確認したところ下記の内容が表示されました。

結局thisの何を使ってgetが何をしているかが分かりませんでした。

Comments

[maisumakun]

同じファイル内にgetの定義あるいはインポートはありませんか？

[erajera]

import get from 'lodash/get'
ありました！

Answer 1

get関数はLodashのものということで確認してみましたが、単に「深い階層のプロパティを、途中でundefinedになったりしてもエラーを出さずに取得する」だけの関数でした（公式）。

特に「このgetをthisに対して呼ばないと動かない」ものではないので、useStateなりuseReducerなりで持たせたdataから処理を始めるようにすればそれで問題ないかと思います。

Comments

[erajera]

ありがとうございます！