Javascript 即使状态更新，是否仍显示以前的内容5秒钟？

我有一个React应用程序，它使用Django后端，我使用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;

import React，{useffect，useState，useRef}来自“React”；
常量文本=（）=>{
const[message，setMessage]=useState（“”）；
const webSocket=useRef（null）；
useffect（（）=>{
webSocket.current=新的webSocket（“ws://localhost:8000/ws/some_url/”；
webSocket.current.onmessage=（res）=>{
const data=JSON.parse（res.data）；
setMessage（data.message）；
};
return（）=>webSocket.current.close（）；
}, []);
返回{message}
；
};
导出默认文本；

因此消息应该在一定时间内可见（以秒为单位，例如-5秒），然后显示下一条消息。你知道怎么做吗？

const Text=（）=>{
const[messages，setMessages]=useState（[]）；
const currentMessage=消息[0]| |“”；
const[timer，setTimer]=useState（null）；
//webSocket引用缺失？；-）
useffect（（）=>{
webSocket.current=新的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（）；
}, []);
//在5秒钟内删除当前消息。
useffect（（）=>{
if（timer | |！messages.length）返回；
设置计时器（设置超时（（）=>{
setMessages（（prevState）=>prevState.slice（1））；
设置计时器（空）；
}, 5000));
}，[消息，计时器]；
返回{currentMessage}
；
};

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

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];
};

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>;
};

Text.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];
};

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>;
};

const Text=（）=>{
const[message，add]=useQue（5000）；
const webSocket=useRef（null）；
useffect（（）=>{
webSocket.current=新的webSocket（“ws://localhost:8000/ws/some_url/”；
webSocket.current.onmessage=（res）=>{
const data=JSON.parse（res.data）；
添加（data.message）；//-->添加新消息
};
return（）=>webSocket.current.close（）；
}, []);
返回{message}
；
};

---

您希望减速是使用去抖动、节流还是排队？哪一种最简单？它们的语义不同，您应该考虑哪一种对您从websocket显示的数据最有意义。我是初学者，所以我对这些术语不太了解，我在寻找一个简单的解决方案哇，这么聪明的解决方案。这对我来说非常合适。我将把它标记为正确答案。这里需要注意的是：如果消息持续比您删除它们的速度快，那么

消息

数组的大小将增大。如果您在有限的时间内进行调试，这是可以的。否则，您还需要设置大小限制和丢弃消息的方法。不，情况并非如此，我对上述代码有一些问题。如果我一直从后端接收消息，则只有当我们停止接收消息时，currentMessage才会更改。我想在收到消息时更改当前消息。我们怎样才能做到呢？啊，是的，很抱歉。我将编辑答案：只有在弹出消息而不是排队时才应重置超时。@dev740编辑了我的答案