Почему моя программа прерывается, когда я пытаюсь обновить состояние пользователя? - PullRequest
Новая
       14

Почему моя программа прерывается, когда я пытаюсь обновить состояние пользователя?

1 голос
/ 26 июня 2019

Когда я пытаюсь обновить состояние пользователя, моя программа просто прерывается.Проблемная строка - "setMesses (_messages);".Я попытался использовать заглавные буквы, но ничего не изменилось.

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;

1 Ответ

0 голосов
/ 26 июня 2019

Причина, по которой это происходит, заключается в том, что вы вызываете loadChet, и это вызывает setMesses, что вызывает повторный рендеринг компонента и снова вызывает loadChet, вызывая бесконечный цикл.

Вы не должны вызывать loadChet для функции, возможно, используйте useEffect и вызывать ее только один раз. Когда вам нужно позвонить loadChet?

Edit:

Попробуйте это 

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>
    );
}
...