Question

下面是一个从firebase数据库获取消息的函数，但它只有setState只有一条消息。

但是，console.log可以在对象中记录多条消息。我的功能有什么问题吗？

getMessages(){
var messages = [];
firebaseApp.database().ref('users/'+firebase.auth().currentUser.uid+'/userChat/'+firebase.auth().currentUser.uid).orderByValue().limitToLast(10).once('value', (dataSnapshot) => {
  //alert(JSON.stringify(dataSnapshot.val()));
  dataSnapshot.forEach((child) => {
    firebaseApp.database().ref('messages').child(child.key).once("value", (message)=>{
      //alert(JSON.stringify(messages));
      messages.push({
        _id: Math.round(Math.random() * 1000000),
        text: message.val().text,
        createdAt: new Date(message.val().timestamp),
        user: {
          _id: 1,
          name: 'Developer',
        },
      });
      this.setState({
        messages: messages
      });
      console.log('woooo'+JSON.stringify(messages));
    });
  });
});
}

Answer 1

~~您正在forEach阻止内设置状态。尝试将其移到迭代块之外~~

正如JanneKlouman所说，当你正在进行异步调用时，将它从iterration块中删除是不够的。您可以创建一个新数组并在每次迭代时将其设置为状态，react将批处理那些设置状态调用：

function getMessages() {
  var messages = [];
  firebaseApp.database().ref('users/' + firebase.auth().currentUser.uid + '/userChat/' + firebase.auth().currentUser.uid).orderByValue().limitToLast(10).once('value', (dataSnapshot) => {
    //alert(JSON.stringify(dataSnapshot.val()));
    dataSnapshot.forEach((child) => {
      firebaseApp.database().ref('messages').child(child.key).once("value", (message) => {
        const newMessage = {
          _id: Math.round(Math.random() * 1000000),
          text: message.val().text,
          createdAt: new Date(message.val().timestamp),
          user: {
            _id: 1,
            name: 'Developer',
          },
        }
        const nextState = this.state.messages.map(message => {
          return {
            ...message,
            user: {...meesage.user} // i think we must do this in order to break out of the reference as spreading will only work on a shallow level
          }
        });
        this.setState({
          messages: [...nextState, newMessage]
        });
      });
    });
  });
}

Answer 2

尝试在设置状态之前克隆数组：

select er.gg, er.z, er.y
from table_one er
where er.gg = '123'
-- or:
where er.gg >= '123'
  and er.gg <= '456'
ORDER BY er.gg, er.z, er.y -- Or: some other ordering
    ;

关于React中的setState

2 个答案: