![](/img/trans.png)
[英]Why does my code break when I try to attach my methods to the class prototype?
[英]Why does my program break when I try to refresh the usestate?
當我嘗試刷新usestate時,我的程序就中斷了。 有問題的行是“ 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;
發生這種情況的原因是因為您調用loadChet
並調用setMesses
wich使得組件重新渲染並再次調用loadChet
,從而導致無限循環。
您不應該在函數上調用loadChet
,也許使用useEffect
並只調用一次即可。 您何時需要致電loadChet
?
嘗試這個
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>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.