"React Hook is called conditionally"：如何检查组件中的可选上下文

Question

我有一个可重复使用的自定义输入组件，它可能会或可能不会在 Formik 上下文中使用（即通常在 Formik 表单中或在表单之外）。行为需要相应地不同。我需要确定此组件中的模式。有一个名为 useFormikContext() 的钩子，如果它不适用就会抛出一个错误。但是当我这样做时

try {
    const { values, setFieldValue } = useFormikContext();
}
catch (error) {
    alert('NOT in the Formik Context');
}
finally {
    alert ('End');
}

我明白了

  Line 17:43:  React Hook "useFormikContext" is called conditionally. 
  React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks

那么有没有办法清楚地判断我是否可以应用挂钩？

Answer 1

您需要将您的部分包装到 FC，然后使用条件进行渲染。

Answer 2

只是不要从钩子中解构并检查传入值是否为 undefined 或不执行您的逻辑，就像这样:-

 const formik = useFormikContext();
  if (!formik) {
    alert("NOT in the Formik Context");
  } else {
    alert("In the formik context");
  }

这是代码和框:-

虽然我建议在 if/else 条件下显示抛出自定义错误并在 错误边界 中捕获此错误，然后有一个后备组件来显示错误而不是使用 alert 如果它是 UI 的东西来描绘。否则，完全跳过错误边界和警报，因为 console.warn 日志对此更好。

"React Hook is called conditionally"：如何检查组件中的可选上下文

"React Hook is called conditionally": How to check for optional contexts in a component

javascript

reactjs

formik

react-hooks