Проблема с обновлением состояния с помощью socket.io, после того, как состояние установлено, оно не сохраняется до следующего сообщения сокета

Итак, я пытаюсь создать базовое приложение для комментариев, используя reactjs, у меня есть бэкэнд NestJS, который, как я знаю, уже работает, поскольку я создал HTML-страницу с голыми костями, чтобы проверить концепцию.

В основном в новом «сообщении» я пытаюсь установить состояние комментариев равным [...comments, newComment], чтобы сохранить предыдущие комментарии.

Но каждый раз, когда я получаю сообщение с сервера, мое состояние (комментарии) перезаписывается новым сообщением и не сохраняет никаких данных.

Я устранил неполадки, и похоже, что состояние (комментарии) вообще не устанавливается? Вот мой код:

const socket = io('http://localhost:4000');

function App() {

    const [comments, setComments] = useState([
    ]);

    function newComment(comment) {
        console.info("Request for new comment: ");
        console.info(comments);
        setComments([...comments, comment]);
    }

    useEffect(() => {
        console.info("Comments updated to: ")
        console.info(comments);
    }, [comments]);

    useEffect(() => {
        socket.on("message", data => {
            const theComment = data.data;
            let leComment = { id: 4, name: 'ted', comment: theComment }
            newComment(leComment);
        });
    }, []);

Вот моя консоль в хроме для отладки: Проблема с обновлением состояния с помощью socket.io, после того, как состояние установлено, оно не сохраняется до следующего сообщения сокета

Любая помощь или предложения очень ценятся, я застрял на этом уже целый день!

Конечный результат, который я ищу, - это просто любое новое «сообщение», которое приходит, комментарий в этом сообщении добавляется к моему состоянию, которое называется комментариями.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
11
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема, которую я вижу здесь, заключается в следующем

setComments([...comments, comment])

попробуй изменить в

setComments(comments => [...comments, comment])

Другие вопросы по теме