javascript - 即使状态更新也显示之前的内容 5 秒？

Question

我有一个使用 Django 后端的 React 应用程序，我使用 webSocket 连接后端，当有一些变化时更新状态。但是变化非常快，所以只能看到最后的变化。我想在显示下一条消息之前将上一条消息显示一段时间。这是我的代码

import React, { useEffect, useState, useRef } from "react";

const Text = () => {
  const [message, setMessage] = useState("");
  const webSocket = useRef(null);

  useEffect(() => {
    webSocket.current = new WebSocket("ws://localhost:8000/ws/some_url/");
    webSocket.current.onmessage = (res) => {
      const data = JSON.parse(res.data);
      setMessage(data.message);
    };
    return () => webSocket.current.close();
  }, []);

  return <p>{message}</p>;
};

export default Text;

所以消息应该在特定时间可见(以秒为单位，例如 - 5 秒)，然后应该显示下一条消息。知道如何做到这一点吗？

Answer 1

const Text = () => {
  const [messages, setMessages] = useState([]);
  const currentMessage = messages[0] || "";

  const [timer, setTimer] = useState(null);

  // webSocket ref missing? ;-)

  useEffect(() => {
    webSocket.current = new WebSocket("ws://localhost:8000/ws/some_url/");
    webSocket.current.onmessage = (res) => {
      const data = JSON.parse(res.data);
      setMessages((prevState) => [ ...prevState, data.message]);
    };
    return () => webSocket.current.close();
  }, []);

  // Remove the current message in 5 seconds.
  useEffect(() => {
    if (timer || !messages.length) return;

    setTimer(setTimeout(() => {
      setMessages((prevState) => prevState.slice(1));
      setTimer(null);
    }, 5000));
  }, [messages, timer]);

  return <p>{currentMessage}</p>;
};