Блог

Я создаю приложение для чата в React. Я использую useEffect-hook для обновления сообщений (все, что он действительно делает, это извлекает их с JSON-сервера). Я хочу, чтобы они обновлялись каждый раз, когда кто-то в комнате отправляет новое сообщение.

Это одна из альтернатив, которые у меня есть:

 useEffect(() => {
    fetch('http://localhost:8000/messages/')
    .then(res => {
        return res.json();
    })
    .then(data => {
        data = data.filter((msg) => msg.room === room);
        setData(data);
    })
    .catch(err => {
        console.error(`Error: ${err}`);
    })

    divRef.current.scrollIntoView({ behavior: 'smooth' });

}, []);
 

«данные» — это список сообщений. Это показывает все сообщения при входе в комнату, но не загружается при передаче нового сообщения. Предположительно из-за пустого списка в конце. Поэтому я попробовал это:

В другом компоненте у меня есть переменная «отправлено», для которой устанавливается значение true каждый раз, когда вы отправляете сообщение, например:

 const onSubmit = (e) => {
    e.preventDefault();

    const data = {author: user, body: msg, room }
    setSent(true);

    fetch(`http://localhost:8000/messages/`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(response => {
        response.json();
        setSent(false);
    })
    .catch(err => console.error(`Error: ${err}`));

    setMsg('');
}
 

Таким образом, каждый раз, когда вы отправляете сообщение, ему присваивается значение «true», и как только оно было успешно отправлено, ему возвращается значение «false». Затем я передал его в качестве поддержки компоненту, который я использую useEffect:

 <div className='chat-main'>
    <Messages user={user} room={room} sent={sent} />
</div>
 

Затем я помещаю «отправленную» переменную в список внизу useEffect-hook. Это обновляет сообщения для пользователя, который отправляет сообщение, но не для других (потому что, конечно, «отправлено» изменяется только при отправке сообщения)

Что я могу здесь сделать? Есть ли способ?