尝试刷新usestate时为什么程序会中断？

Question

When I try to refresh the usestate my program just breaks. The problematic line is "setMesses(_messages);". I tried to capitalized the usestate but nothing has changed.

import React, {useState} from 'react';
import Message from './Message';
import * as firebase from "firebase";

function MessContainer() {
    let counter = 0;
    let _messages = [];
    const [messes, setMesses] = useState([{this: null}]);

    firebase.database().ref().child('counter').on('value', function(snapshot){
        counter = snapshot.child("counter").val();
    });

    function load(_counter){
        firebase.database().ref().child('messages/' + _counter).on('value', function(snapshot){        
            let _chet = {}; 
            let _name = snapshot.child("name").val();

            _chet.mess =  _name + ": " + snapshot.child("message").val();

            if(_name === document.getElementById("name").value){
              _chet.status = "right";
            } else {
              _chet.status = "left";
            }
            _messages.push(_chet);
        });
    }


    function loadChet(){
        _messages = [];
        for(let i = 0; i < counter; i++){
            load(i);
        }
        console.log(_messages);
        setMesses(_messages);
        setTimeout(loadChet, 1000); 
    }

    loadChet();

    return (
        <div>{messes.map(_mess => (
            <Message mess={_mess.mess} status={_mess.status} />
        ))}
        </div>
    );
}

export default MessContainer;

Answer 1

The reason why this happens is because you call loadChet and this calls setMesses wich makes the component rerender and call loadChet again, causing a infinity loop.

You shouldn't call loadChet on the function, maybe use useEffect and call it only once will. When do you need to call loadChet ?

Edit:

Try this

function MessContainer() {
    let counter = 0;
    let _messages = [];
    const [messes, setMesses] = useState([{this: null}]);

    firebase.database().ref().child('counter').on('value', function(snapshot){
        counter = snapshot.child("counter").val();
    });

    function load(_counter){
        firebase.database().ref().child('messages/' + _counter).on('value', function(snapshot){        
            let _chet = {}; 
            let _name = snapshot.child("name").val();

            _chet.mess =  _name + ": " + snapshot.child("message").val();

            if(_name === document.getElementById("name").value){
              _chet.status = "right";
            } else {
              _chet.status = "left";
            }
            _messages.push(_chet);
        });
    }


    function loadChet(){
        _messages = [];
        for(let i = 0; i < counter; i++){
            load(i);
        }
        console.log(_messages);
        setMesses(_messages);
        setTimeout(loadChet, 1000); 
    }

    useEffect(() => {
        loadChet();
    }, [])

    return (
        <div>{messes.map(_mess => (
            <Message mess={_mess.mess} status={_mess.status} />
        ))}
        </div>
    );
}