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

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

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

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

React.js

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

Q&A

解決済

1回答

823閲覧

react-selectで作成した情報を、firestoreに保存したい。

kimch

総合スコア8

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

React.js

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

0グッド

0クリップ

投稿2021/09/03 02:36

前提・実現したいこと

react-select のタグ選択で、自身で入力した値をfirestoreに保存したい。

問題点/エラー内容/エラー文章

FirebaseError: Function DocumentReference.set() called with invalid data. Document fields cannot begin and end with "__" (found in document Students/ドキュメントID )

SignUp.jsx const [studentSignUpSkill, setStudentSignUpSkill] = useState(""); const studentSignUpSkillValue = (value) => { setStudentSignUpSkill(value); }; const skillList = [ { value: "英検", label: "英検2級" }, { value: "秘書", label: "秘書検定" }, { value: "企業診断士", label: "中小企業診断士" }, { value: "博士号", label: "博士号" }, { value: "司法書士", label: "司法書士" }, { value: "社労士", label: "社労士" }, { value: "自動車免許", label: "普通自動車免許" }, { value: "TOEIC", label: "TOEIC800点以上" }, { value: "TOEIC", label: "TOEIC900点以上" }, ]; ~~~~~~~~~ <CReatableSelect placeholder="スキル/資格" isMulti value={studentSignUpSkill} onChange={studentSignUpSkillValue} options={skillList} />

想定している処理の流れ

①select内で情報を記述する。
②記述した内容が、エンターキーを押下することで一つのオブジェクトとして生成される。
③firestoreに内容を保存する処理で、保存される。

うまくいっている部分

・あらかじめ用意した内容に関しては、保存することができることを確認済み。
・あらかじめ用意したものに関しては複数個の情報を保存することができた。

エラー原因となり得る部分

・入力した場合、情報のオブジェクト内が、以下のようになってしまう。
オブジェクト内に、isNew:trueの記述が含まれることが原因かと思った。・
あらかじめ用意されたものを選択する場合。

option: label: "秘書検定" value: "秘書"

自分で記述して生成した場合

option: label: "ドラえもん" value: "ドラえもん" __isNew__: true

試したことや調べたこと

-firestoreのドキュメントに直接フィールドを作成し用としたところ、先頭または末尾を 2 つのアンダースコア(__)にすることはできませんと指摘されたことから、エラー箇所に関しては間違いないと考えた。
-ネット検索、公式ドキュメントを調べてみても解決には至らなかった。

#最後に
わかりにくくて申し訳ありません。
皆様のお力をお借りできたらと思います。
よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

自己解決

#オブジェクトを操作し、'isNew'のプロパティを削除できました。
以下のような記述をしました。

jsx

1 2if('__isNew__' in オブジェクト名){ 3delete オブジェクト名.__isNew__ 4}else{ 5set関数(オブジェクト名) 6}

質問を見ていただいた方、回答使用としてくださった方、ありがとうございました。

#参考にさせていただいた記事。

https://qiita.com/rymiyamoto/items/be91b04f70de2b621bb3

投稿2021/09/03 04:44

kimch

総合スコア8

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問