如何在 JS 中异步检索实时 firebase 数据？

Question

所以基本上我一直在 react.js 中做一个聊天应用程序，我达到了我并不总是从数据库接收数据的水平，有时我收到它有时没有，而且状态并不总是更新了，怎么办？

import { Segment, Comment } from 'semantic-ui-react';
import MessageForm from './MessagesForm';
import MessagesHeader from './MessagesHeader';
import firebase from '../../firebase'
import { useSelector } from 'react-redux';
import Message from './Message';

const Messages = () => {
  const [messagesRef, setMessagesRef] = useState(firebase.database().ref('messages'));
  const [messages, setMessages] = useState([]);
  const [messagesLoading, setMessagesLoading] = useState(true);
  const {currentChannel} = useSelector(state => state.channel);
  const {currentUser} = useSelector(state => state.user);
  

  const addListeners = channelId =>{
    addMessageListeners(channelId);
  }

  const addMessageListeners = channelId =>{
    let loadedMessages = [];
    messagesRef.on('child_added', (snapshot) => {
      loadedMessages.push(snapshot.val())
      setMessages(loadedMessages);
    })
  }



useEffect(() => {
    if(currentChannel && currentUser){
    addListeners(currentChannel.id);
    }
  }, [])


  
  const displayMessages = messages =>{
    messages.length > 0 && messages.map(message => (
      <Message key={message.timestamp} message={message} user={currentUser} />
    ))
  }

  return (
    <>
    <MessagesHeader />
    <Segment>
      <Comment.Group className='message'>
        {displayMessages(messages)}
        
      </Comment.Group>
    </Segment>

    <MessageForm  messagesRef={messagesRef}/>
    </>
  )
}

export default Messages;

Answer 1

你的 useEffect 只在第一次渲染时运行，所以你应该给依赖数组一些东西，或者使用 react-redux-firebase，有一个内置的监听器。 :)