Reactでrenderが自動更新されない

Question

非同期処理のsetStateが完了するまではif文でLoadingを表示する仕様としているが、setStateが完了してもrenderが自動更新されない様です。こちらはpushでは浅く、concatにしないとダメという記事も読んだのですがいかがでしょうか。もしconcatを用いてどう修正したら良いかご教示頂けますととても助かります。宜しくお願いいたします

class Grammer extends React.Component {

state = 
    {
     N1:[],
     N2:[],
     N3:[]
    };

componentDidMount(){
   const fetchData = () =>{
    firebase.database().ref("N3")
        .on(("value"),(snapshot)=>{
            snapshot.forEach((childSnapshot)=>{
                this.setState(()=>{
                    N3: this.state.N3.push({
                    id: childSnapshot.key,
                    ...childSnapshot.val()
                    })
                });
            });
            console.log(this.state.N3[0])
        });
};
fetchData();

};

render(){
    
    if(!this.state.N3[0]){
        return <div>Loading</div>
    }else if(this.state.N3[0]){
       return(
            <div>
                <N3Grammer N3={this.state.N3}/>
            </div>
        )
    }
}

};

Answer 1

stateはconstと同じでimmutableだと思ってください。
pushは元の配列を破壊的に変更するため、

N3: this.state.N3.push({})

ではthis.stateに直接変更を掛けることになり、結果、直接変わったN3は新しいN3と比較しても同じものなのでrerenderされません。

concatかスプレッド演算子で展開代入するかして新しい配列を作り、それをsetStateすることで、配列の参照が変わるのでrerenderされます。

Comments

[Marcos]

ご教示頂きありがとうございます！
スプレッド演算子に変更して上手く自動で更新をしてくれました！