2019-10-13から1日間の記事一覧

【Next.js】StripeとFirestoreとFirebase Authenticationのユーザー同時削除

以前まとめたこちらの記事の続きとなります。 nekorokkekun.hatenablog.com以前の段階で、StripeとFirestoreとFirebase Authenticationのユーザーを同時に作成することができました。こちらの記事では、タイトルの通り、StripeとFirestoreとFirebase Authent…

【React】関数コンポーネントにcomponentDidMount的なものを使いたい

Next.js(React)の関数コンポーネントにライフサイクルフックであるcomponentDidMount的な役割を持つ何かを実装したいときには、 useEffect(() => { ... } , []); が使えます。以下は一例です。 import { db } from '../lib/db'; import React, { useEffect…

【React】react-stripe-elementでフォームだけが表示されない

Next.js(React)でreact-stripe-elementを実装した際に、フォームだけが表示されないという現象が起こりました。これは、Headタグ内で読み込んでいるstripe-jsのバージョンが不適合であったということでした。 <script src="https://js.stripe.com/v3/"></script> を実装しなければならないところ <script src="https://js.stripe.com/v2/"></script> を実装して…

【Next.js】Invariant Violation: React.Children.only expected to〜が吐き出される

こんなエラーが出た場合、 Invariant Violation: React.Children.only expected to receive a single React element child. 意味としては、「Reactのコンポーネントは、1つしかエレメントを内包できません」という意味となります。 return ( <StripeProvider stripe={this.state.stripe}> <Head> <script src="https://js.stripe.com/v2/"></script> </Head> <Header /> <div> <h2>{det…</h2></div></header></stripeprovider>