调试 React 用法
以下是您可能在控制台中看到的常见错误及其修复方法列表。
将非受控输入更改为受控输入
如果您在控制台中看到此错误
Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.ac.cn/link/controlled-components
Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.ac.cn/link/controlled-components
您很可能在 `useForm` Hook 或 `form.Field` 组件的使用中忘记了 `defaultValues`。之所以出现这种情况，是因为输入在表单值初始化之前被渲染，因此在进行文本输入时，值从 `undefined` 变为 `""`。
字段值为 unknown 类型
如果您在使用 `form.Field` 并且在检查 `field.state.value` 的值时，看到某个字段的值为 unknown 类型，那么很可能是因为您的表单类型对于我们安全评估来说过于庞大。
这通常表明您应该将表单分解成更小的表单，或者为您的表单使用更具体的类型。
解决此问题的一个方法是使用 TypeScript 的 `as` 关键字对 `field.state.value` 进行类型断言。
tsx
const value = field.state.value as string
const value = field.state.value as string
类型实例化过深，可能存在无限循环
如果您在运行 `tsc` 时在控制台中看到此错误
Type instantiation is excessively deep and possibly infinite
Type instantiation is excessively deep and possibly infinite
您遇到了一个我们未在类型定义中捕获到的 bug。虽然我们已尽最大努力确保我们的类型尽可能准确，但在某些边缘情况下，TypeScript 在处理我们类型的复杂性时遇到了困难。
请 在 GitHub 上向我们报告此问题，以便我们修复。请务必提供一个最小化的重现示例，以便我们能够帮助您进行调试。
请记住，此错误是 TypeScript 错误，而不是运行时错误。这意味着您的代码在用户的机器上仍将按预期运行。
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。