JS/Rect:用于存储和同步API调用的队列

Question

目标是创建一个队列来存储API请求。

预期结果：

• 每次按下Add按钮时，都应将请求添加到队列中
• 一旦按下Sync按钮，队列中的所有API请求都应被激发并清除

以下是我迄今为止所做的尝试：https://codesandbox.io/s/elated-sky-e23w6?file=/src/App.js

这里有几个问题：

• API调用未被激发
• CCD_ 3在每次添加新请求时被清除
• 同步不起作用
• 如何存储API请求配置

如何解决这一问题？非常感谢。

Answer 1

队列必须存储为React组件的状态。您需要的是useState或useRef挂钩。后者在您的情况下更好，因为您已经实现了BoxEventProcessor，并且在单击add/submit按钮时不需要重新渲染任何组件。(请参阅此处的区别(

const App = () => {
const sendEventToServer = async (id) => { ... };
const refBoxEventProcessor = React.useRef(
createSerialProcessor(sendEventToServer)
);
const submit = (id) => {
refBoxEventProcessor.current.addEvent(`param-${id}`, new Date().toString());
};
const onSync = () => {
refBoxEventProcessor.current.processEvents();
};
return (<>...</>);

以上是useRef()的最小示例。它的自变量是新创建的SerialProcessor实例，该实例将存储在对象refBoxEventProcessor中的current属性下。在后期重新渲染时，它将持续存在。所有用户的"；API请求；存储在此对象的队列中，直到用户单击CCD_ 13按钮以清除队列为止。

您可以详细说明初始化(useRef(和submit函数，以更好地满足您的需要。

https://codesandbox.io/s/answer-to-so-70387163-0yqi5