如何将要添加到 React Native Context 状态的项目排队

Question

我正在尝试使用 React Native Context 在我的应用 UI 中显示类似 console.log 的日志。我在上下文中有这个代码：

...
const [logs, setLogs] = useState<string[]>([]);
const addToConsoleLogs = (log: string) => {
  setLogs([...logs, log]);
};
...

当我在获取之前和之后调用该函数时在屏幕上：

...
doFetch = () => {
  addToConsoleLogs('Start..');
  await fetch(...);
  addToConsoleLogs('Done.');
}
...

没有按预期工作，因为这部分>>setLogs([...logs, log]);，之前的日志状态值在第二次调用中似乎不是实际的，因为我认为这些调用在同一个线程中并且它们是异步的。太糟糕了，我们不能把await 放在setLogs() 前面。在 React Native Hooks 机制中模仿 console.log 的最佳方法是什么？

Answer 1

我们可以使用状态回调：setLogs(logs => [...logs, log])，所有调用都在等待回调。