上下文：

• 添加新消息（例如，每两秒，使用 setInterval）。
• 消息具有状态，旧的或新的。新添加的消息有一个“新”标志。
• 每 5 秒后，所有“新”消息都被指定为“旧”消息。（设置超时）

问题：

• 直到结束才会触发超时。添加了新消息，但在添加所有消息之前它们保持“新”状态。
• 我怀疑每次更新后超时都会被重置/清除，并且因为更新发生得比超时快，所以超时回调永远不会及时触发（因此只有最终超时被触发）。

function useInterval(callback, delay) {
  const savedCallback = React.useRef();
  // Remember the latest callback.
  React.useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);
  // Set up the interval.
  React.useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

const defaultMessages = [
  {
    message: "message 1",
    new: false
  },
  {
    message: "message 2",
    new: false
  },
  {
    message: "message 3",
    new: true
  }
];

export default function App() {
  const [messages, setMessages] = React.useState(defaultMessages);
  const messagesRef = React.useRef(messages);

  messagesRef.current = messages;

  // add a new message every 2 seconds
  useInterval(() => {
    messages.length < 10 &&
      setMessages([
        ...messages,
        { message: `message ${messages.length + 1}`, new: true }
      ]);
  }, 2000);

  React.useEffect(() => {
    const timer = setTimeout(() => {
      // console.log("change all messages from new to old");
      const updateMessages = messagesRef.current.map(m => ({
        ...m,
        new: false
      }));
      setMessages([...updateMessages]);
    }, 5000); // if you change this to duration less than 2 seconds then it runs just fine
    return () => clearTimeout(timer); // removing the timer, calls it with every message update and seemingly ignores the timeout duration
  });

  return (
    <div className="App">
      {messages.map(m => (
        <div key={m.message}>
          {m.message}, status: {m.new ? "new" : "old"}
        </div>
      ))}
    </div>
  );
}

示例代码：https : //codesandbox.io/s/settimeout-resetting-with-updates-ufl3b

不知道如何使用 React Hooks api 来解决这个问题。超时需要在每次更新后持续 5 秒。现在，每个超时似乎都被其后的超时取消或排队。我很困惑。

谢谢！