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

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

ただいまの
回答率

88.92%

Firestoreへのデータ更新でStateがうまく取得できない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 135

ug_o

score 20

前提・実現したいこと

firestoreへのデータ更新を実現したいです。
DBは作成済みで対象のドキュメント「name」「updated_at」の更新を行いたいのですが、
<input>部分のsetStateがうまく取得できないのです。
ステップフォーム形式のページ構成です。

該当のソースコード

class GS extends React.Component {
  componentDidMount() {
    firebase.auth().onAuthStateChanged((user) => {
      this.setState({ user });
    });
  }
  render() {
    return (
      <GSBaseLayout>
        <div id="gs-page">
          <div className="gs-wrapper">
            <div className="section gs-inner-nav gs-inner bg-snow">
              <div className="gs-inner-nav-inner">
                <h6 className="title grey xs-text gs-progress">
                  プロフィールを設定しましょう
                </h6>

                <StepWizard nav={<GSNav />} />
              </div>
            </div>

            <div className="section gs-inner-form gs-inner">
              <div className="gs-inner-form">
                <div className="gs-inner-form-inner">
                  <StepWizard isHashEnabled>
                    <Step1 />
                    <Step2 />
                    <Step3 />
                  </StepWizard>
                </div>
              </div>
            </div>

            <div className="gs-dots-nav">
              <span className="ico gs-dot">
                <Circle />
              </span>
              <span className="ico gs-dot">
                <Circle />
              </span>
              <span className="ico gs-dot">
                <Circle />
              </span>
            </div>
          </div>
        </div>
      </GSBaseLayout>
    );
  }
}
export default withAuth(GS);

function Step1(props) {
  if (props.currentStep !== 1) {
    return null;
  }

  const [name, update_at] = useState("");
  const onChangeName = useCallback(async (e) => {
    try {
      await db.collection("users").doc(user.id).update({
        name: this.state.name,
        update_at: firebase.firestore.FieldValue.serverTimestamp(),
  })
 }catch (error) {
  console.error(error);
  }
 });
  return (
    <div>
      <h1 className="title">ユーザー名の設定</h1>
      <p>Cepaerを始める前に、あなたのプロフィールを完成させましょう。</p>
      <div className="action-button-wrapper input-wrapper gs-input">
        <span className="input-prefix">
          <Human />
        </span>
        <input className="input-inner" placeholder="例:山田太郎" 
        onChange={(e) => this.setState({name: e.target.value})} />
      </div>
      <button className="button button-w100" onClick={props.nextStep} id="gs1">
        次に進む
      </button>
    </div>
  );
}

エラーコード

Cannot read property 'setState' of undefined
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

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

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る