React: 从钩子中触发悬念

您要请求功能还是报告错误？

问题。 这也可能与#14563有关。

我们如何从钩子中触发悬念？

为什么提出这个问题？

在我们使用react-i18next出现了这个问题。 react-i18next最近的更新提供了useTranslation -hook，它允许获取当前翻译，并且还会触发加载尚未加载的翻译命名空间（有点像代码拆分）。

为了处理尚未加载翻译的情况， useTranslation -hook 会抛出一个触发Suspense的承诺，这实际上非常简洁，因为它与现有的反应功能完美集成！

但是，如果您在调用useTranslation -hook 后使用更多钩子，那么如果useTranslation抛出承诺，则不会呈现这些其他钩子。 一旦翻译加载完毕，钩子就不会再抛出，react 会给你一个红色的大警告，提示钩子的数量已经改变。

例子

const Component = () => {
  const [t] = useTranslation('translationnamespace');
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount(count + 1)}>
      {t('The count is:')} {count}
    </div>
  );
};

如果translationnamespace尚未加载，则useTranslation将抛出，导致useState无法呈现。 加载translationnamespace ， useTranslation将不再抛出，这会导致呈现useState从而导致警告。

一般情况

所以这个问题不仅仅适用于 react-i18next，而是适用于所有希望触发悬念的钩子。 我们将如何做这件事，这将如何与当前的“钩子规则”相结合，即钩子不能有条件地呈现？