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

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

ただいまの
回答率

89.10%

firebase React でチャット機能を実装したいのですが、その前段階でテキストのレンダリングが上手くいきません。

解決済

回答 1

投稿

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

webnakada

score 4

実現したいこと

Reactとfirebaseでチャット機能を実現したいと考えていますが、その前段で思ったとおりの動作をしてくれないので、ご回答をお願いしたいと思っております。どうかよろしくお願いします。質問に回答して頂くにあたって不明点ありましたら追記、返答させて頂きます。

新しいテキストをレンダリングするために、自身で作成したInputコンポーネントにテキストを入力し、Buttonコンポーネントをクリックすると、その入力したテキストが1回レンダリングされるようにしたいのですが、1回のクリックで2回レンダリングされ入力したテキストが2回分表示されてしまします。

発生している問題

inputタグ(コンポーネント)にテキストを入力し、buttonタグ(コンポーネント)を1クリックすると2回テキストが表示される。

コードの説明

1,Chatコンポーネントがレンダリングされた直後にcomponentDidMountでloadText関数を呼び出し、firebaseに書き込んでいるテキストと投稿者を読み出して表示させています。
2,テキストをinputタグに入力し、ボタンをクリックしてhandleSubmit関数を呼び出し、firebaseに書き込みを行う。
3,firebaseへの書き込みが発生した時点で、loadtext関数内部のonSnapshotが作動する。書き込みがされた最新の状態firebaseを読み込み、それをconstructor内部にsetStateしrender()を呼び出す。

私の認識では3でsetStateを一度しか実行していないので、レンダリングも1回しかされないという認識ですが、2回レンダリングうまくいきません。ちなみに、2回表示されるテキストについてコンソールで確認すると、先に表示された方のserverTimeStampがnullで、後に表示された方に正しく値が入っているという違いがありました。

該当のソースコード

chat.component.jsx

import React from 'react'
import './chat.styles.scss'
import Input from '../../component/input/input.component'
import Button from '../../component/button/button.component'
import {Link} from 'react-router-dom'
import {auth,firestore, serverTimeStamp} from '../../firebase/firebase.utils'

class Chat extends React.Component {
    constructor(){
    super()

        this.state={
            text:'',
            displayName:'',
            uid:'',
            message:[]
        }
    }

    loadText = () =>{

        firestore.collection('text').orderBy('serverTimeStamp','desc').onSnapshot(snapshot => {

            snapshot.docChanges().forEach(change => {
                if (change.type == 'removed'){

                } else {
                    const {text,displayName,serverTimeStamp} = change.doc.data()
                    const message = this.state.message
                    const obj = {text:text,displayName:displayName,serverTimeStamp:serverTimeStamp,id:change.doc.id}
                    this.setState({message:message.concat(obj)})
                } 

            })

        })

    }


    componentDidMount(){
        auth.onAuthStateChanged(async (user)  =>{
            if(!user){
                alert('ログインしてください')
                this.props.history.push('/')
            } else{ 
                const {uid,displayName} = user
                this.setState({displayName:displayName,uid:uid})     
            }
        })

        this.loadText()
    }


    signOut=()=>{
        auth.signOut()
    }


    handleChange = (e) => {
        const {value} =e.target
        this.setState({text:value})
    }

    handleSubmit = (e) => {
        e.preventDefault()

        firestore.collection('text').add({
            displayName:this.state.displayName,
            uid:this.state.uid,
            text:this.state.text,        
            serverTimeStamp:serverTimeStamp()
        })
        this.setState({text:''})
    }

    render(){
        const convesation= this.state.message.map((message,index) => {
            return(
                <div className='message' key={index} >
                    <div>{message.text}</div>
                    <div className='contributor'>投稿者:{message.displayName}</div>
                </div>
            )
        })
        return(

            <div className='chat'>

                <div className='convesation-area'>
                    {convesation}
                </div>

                <form onSubmit={this.handleSubmit}>
                <Input
                    type='text'
                    name='text'
                    handleChange={this.handleChange}
                    value={this.state.text}
                    placeholder='テキストを入力してください'
                />
                <Button
                    chlldren='送信'
                /> 
                </form>
                    <Link className='signout' to='/' onClick={this.signOut}>サインアウト</Link>
            </div>
        )
    }

}

export default Chat  

補足情報(FW/ツールのバージョンなど)

・環境
OS:Windows10

・FWなどののバージョン
"firebase": "^7.15.5",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1""
"node.js" v12.16.1

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

loadText関数の

const {text,displayName,serverTimeStamp} = change.doc.data()


下に、

if(serverTimeStamp == null){
    return
 }

 
を書き加えることで解決しました。

理由としては、firebaseのserverTimeStamp()は、実行された瞬間にnullが入り、しばらくすると値が入る仕組みになっており、nullが返された時(added)にonSnapshotが実行され、nullがなにかしらの値に修正(modified)されたときにdocChangesが実行され、結果的にsetStateが2回連続で実行されることになったため1クリックで同じテキストが2回表示されたものと考えられます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

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

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

  • トップ
  • JavaScriptに関する質問
  • firebase React でチャット機能を実装したいのですが、その前段階でテキストのレンダリングが上手くいきません。