Блог

итак, в основном я делал приложение для чата в 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 amp;amp; currentUser){
    addListeners(currentChannel.id);
    }
  }, [])


  
  const displayMessages = messages =>{
    messages.length > 0 amp;amp; 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;
 

ваш useEffect запускается только при первом рендеринге, поэтому вы должны ввести что-то в массив зависимостей или использовать react-redux-firebase, есть встроенный прослушиватель. 🙂