Context:
- 添加新消息(例如,每两秒,使用 setInterval)。
- 消息有状态,可以是旧的,也可以是新的。新添加的消息有一个“新”标志。
- 每 5 秒后,所有“新”消息都会被指定为“旧”消息。 (设置超时)
Problem:
- 直到结束才触发超时。添加新消息,但在添加所有消息之前它们仍保持“新”状态。
- 我怀疑每次更新后超时都会被重置/清除,并且因为更新发生的速度比超时快,所以超时回调永远不会及时触发(因此只有最终的超时被触发)。
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 https://codesandbox.io/s/settimeout-resetting-with-updates-ufl3b
不知道如何使用 React Hooks api 来解决这个问题。每次更新后超时需要持续五秒。现在,每次暂停似乎都被取消或被后面的暂停排队。我很困惑。
谢谢你!