QA@IT

React.jsで'setState' of nullのエラーが解決できない

7619 PV

初めて質問させていただきます。

最近,React.jsを勉強し始めたのですが、setStateメソッドの部分で'setState' of nullというエラーが出てしまい、全く先に進めなくなってしまいました。
Reactについて詳しい方にご教授いただければと思います。

開発環境: React.js + Firebase

databaseには、firebaseを使っており、ここからデータを読み込んで、Stateのtweetsに値を格納したいと思っております。格納できれば解決するのですが、どうしてもわかりません。
コードは以下です。

このコードで、componentDidMount()のthis.setStateの部分でエラーが起きてしまいます。

エラー文は以下です。

Uncaught TypeError: Cannot read property 'setState' of null
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta lang="ja">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
</head>

<body>
    <div id="tweet"></div>

    <script type="text/babel">
        // Initialize Firebase
        var config = {
            ********非表示にしています******
        };
        firebase.initializeApp(config);

        var firebaseRef = firebase.database().ref();
        var tweetsRef = firebaseRef.child("tweets");

        // メインツイート画面
        class TweetContainer extends React.Component{

            constructor(props) {
            super(props);
                this.state = {tweets: [
                    { id: 1, user: 'Tom',   text: 'Good morning' },
                    { id: 2, user: 'John',  text: 'Good afternoon' },
                    { id: 3, user: 'Emily', text: 'Good evening' }
                ]};
                console.log("initialized");

                this.componentDidMount = this.componentDidMount.bind(this);
        }

            componentDidMount(){
                tweetsRef.on("value", function(snapshot){
                    this.setState({ //エラー部分
                        tweets: snapshot.val()
                    });
                });
            }

            render(){
                var tweetItems = this.state.tweets.map(function(tweet){
                    return (
                        <TweetItem tweet={tweet} />
                    );
                });

                return(
                    <div className="tweetContainer">
                        {tweetItems}
                        <TweetForm />
                    </div>
                );
            }
        }

        //ツイートアイテム
        class TweetItem extends React.Component{
            constructor(props) {
            super(props);
        }

            render(){
                return(
                    <div className="tweetItem">
                        <div className="tweet">{this.props.tweet.text}</div>
                    </div>
                );
            }
        }

        //送信フォーム
        class TweetForm extends React.Component{
            constructor(props) {
            super(props);
                this._onClick = this._onClick.bind(this);
        }

            _onClick(e){
                    tweetsRef.push({
                        text: ReactDOM.findDOMNode(this.refs.inputValue).value
                    });
            }

            render(){
                return(
                    <div className="tweetForm">
                        <input ref="inputValue" type="text" placeholder="message..." />
                        <input type="button" value="送信" onClick={this._onClick.bind(this)}/>
                    </div>
                );
            }
        }

        //レンダリング
        ReactDOM.render(
            <TweetContainer />,
            document.getElementById("tweet")
        );
    </script>

</body>
</html>

ウォッチ

この質問への回答やコメントをメールでお知らせします。