在开发中触发React Suspense状态

Question

假设我有这样的一个设置：

function App() {
  return (
    <React.Suspense fallback={<SomeOtherComponent />}>
      <SomeComponent />
    </React.Suspense>
  );
}

在开发过程中，是否有一种简单的方法可以触发<SomeComponent />暂停一段时间，以便我可以查看备用状态的外观?

我想这样做是因为我正在尝试确保我的备用状态看起来正确，并且从非备用状态到过渡不会看起来很卡顿。我希望有一种可编程的解决方案可以使组件从JavaScript端自动暂停。

- Jack Gore

---

这个回答解决了你的问题吗？React suspense/lazy delay? - Luke Willis

我不知道是否有一种内置方法可以显示命令的回退，但是如果您从悬停中抛出一个承诺，您将收到回退直到承诺完成。您可以使用这个设置一些东西来实现您想要的功能。 - Jacob Smit

Answer 1

香草解决方案（不推荐）

触发暂停的非官方方式是通过抛出一个Promise。

const SuspenseTrigger = () => {
  throw new Promise(() => {})
}

注意，未来版本的React可能不支持触发Suspense的这种方法。请勿在生产环境中使用，更多信息请参见此答案。

示例实现：

const SomeComponent = () => {
  const [ready, setReady] = useState(false)

  useEffect(() => {
    setTimeout(() => setReady(true), 1000)
  }, [])

  return ready 
    ? <div>hello world!</div>
    : <SuspenseTrigger/>
}

const App = () => 
  <Suspense fallback={<div>loading</div>}>
    <SomeComponent/>
  </Suspense>

- chantey

---

我对React一窍不通，有没有办法让这个在一段时间后成功？我删除了setTimeout周围的useEffect包装器，这实际上使组件保持重新渲染。我不知道这是好还是坏...但是，现在我能够在一段时间后将变量设置为true，并在suspense内呈现组件... - ii iml0sto1

如果你是新手，我强烈建议不要玩悬挂触发器。可以查看像recoil这样的库，它可以正确地处理这个问题。此外，useEffect非常重要，否则会导致无限循环，请参阅此处以获取更多信息。 - chantey

我又制作了一个样本，因为我的工作需要我进行检查 :) - ii iml0sto1