即使状态更新也显示之前的内容 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>;
};

Answer 2

您可以创建自定义挂钩来处理消息转换。作为参数传递您希望在显示下一条消息之前等待的时间。您可以在代码的其他部分使用它：

useQueu.js

const useQueu = time => {
  const [current, setCurrent] = useState(null); //--> current message
  const queu = useRef([]); //--> messages

  useEffect(() => {
    const timeout = setTimeout(() => {
      setCurrent(queu.current.shift());
    }, time);
    return () => clearTimeout(timeout);
  }, [current]);

  const add = obj => {
    if (!current) setCurrent(obj); //--> don't wait - render immediately
    else {
      queu.current.push(obj);
    }
  };
  return [current, add];
};

Text.js

const Text = () => {
  const [message, add] = useQue(5000);
  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);
      add(data.message); //--> add new message
    };
    return () => webSocket.current.close();
  }, []);

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

Working example

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

Show the previous content for 5 seconds even if the state updates?

javascript

websocket

reactjs

react-hooks