js foreach内の変数

Question

今 react natice で開発をしているのですがJSの変数のスコープに苦しめられております。

foreach内で使用した変数をその外で使いたいのですがスコープによって使えません。

この様な場合どの様にするのがベストなのでしょうか。

countNumberという変数を一番下のif文でも使いたいのですがこのままだと一番下のif文のcountNumberは常に0になってしまいます。

 var countNumber = 0;


        firebaseRef
            .on("value", function(snapshot) {
                snapshot.forEach(function (childSnapshot) {
                        // var countNumber = 0;
                    const childData = childSnapshot.val();
                    const savedUserId = childData.userId;
                    if (loginUserId === savedUserId ){
                        countNumber += 1
                    }
                })
            });

        if (countNumber === 0){
            this.setState({ isModalVisible: !this.state.isModalVisible });
            console.log(this.state.isModalVisible);
        }

Comments

[m.ts10806]

「React.js」もタグに入れておいてください。

Answer 1

JSの変数のスコープに苦しめられて

↑スコープの問題ではありません。

var countNumber = 0;

firebaseRef
    .on("value", function(snapshot) { // <-- イベントハンドラに処理を登録しているだけです。
        snapshot.forEach(function (childSnapshot) {
                // var countNumber = 0;
            const childData = childSnapshot.val();
            const savedUserId = childData.userId;
            if (loginUserId === savedUserId ){
                countNumber += 1
            }
        })
    });

// ↓登録処理が終わった直後にここが実行されます
if (countNumber === 0){
    this.setState({ isModalVisible: !this.state.isModalVisible });
    console.log(this.state.isModalVisible);
}

Comments

[Koyyyyyy]

素早い返信ありがとうございます！
なんとなくわかりました！
ということは一番下のif文の条件でcountNumberがずっと0になってしまう理由とは何でしょうか。
質問が被っている様ですいません。

[tkturbo]

宣言部でcountNumberに0をセットしている→イベントハンドラに処理を登録している（処理自体は実行されていない）→登録処理後もcountNumberの値は0のまま。
回答内容と同じことですが。

[Koyyyyyy]

イベントハンドラを実行された後に一番下のif文を実行するにはどうすればいいのでしょうか。

[tkturbo]

> イベントハンドラを実行された後に一番下のif文を実行するには

イベントハンドラの末尾に入れる、というのが解のような気がします。
# イベント実行ごとに必ず実行されてしまいますが。

Answer 2

 var countNumber = 0;


        firebaseRef
            .on("value", function(snapshot) {
                snapshot.forEach(function (childSnapshot) {
                        // var countNumber = 0;
                    const childData = childSnapshot.val();
                    const savedUserId = childData.userId;
                    if (loginUserId === savedUserId ){
                        countNumber += 1
                    }
                })
                if (countNumber === 0){
                    this.setState({ isModalVisible: !this.state.isModalVisible });
                    console.log(this.state.isModalVisible);
                }
            });

"value" イベント発生時にループ回したりsetStateしたいのであれば、上記のような記述になります。
元のコードだと "value" イベント発生を待たずに "if (countNumber===0)" のIFブロックが評価されてしまい、その結果countNumberが常にゼロということになります。

ご参考になれば。