反应钩子形式 - 类型错误：无法读取 L 处未定义的属性“拆分”（get.ts：6）

Posted 2023-03-23

【中文标题】反应钩子形式 - 类型错误：无法读取 L 处未定义的属性“拆分”（get.ts：6）

【英文标题】：React hook form - TypeError: Cannot read property 'split' of undefined at L (get.ts:6)

【发布时间】：2021-02-12 20:50:51

【问题描述】：

使用带有 react hook 表单和 reactstrap 的 create react app。它抛出上述错误。由于控制器中缺少名称属性，因此得到的答案很少。我没有使用控制器。它仅在构建后发生。

您可以在下面找到完整的代码。

 const  register, handleSubmit, errors  = useForm(
    mode: "onSubmit",
    reValidateMode: "onBlur",
  );
 <Form className="Login" onSubmit=handleSubmit(submitHandler)>
        <h1 className="mb-4">Log in</h1>
        <FormGroup className=errors.email ? "mb-2" : "mb-4">
          <Label for="email" hidden>
            Email
          </Label>
          <Input
            type="text"
            data-test="component-field"
            name="email"
            innerRef=register( required: true )
            id="email"
            placeholder="Email"
            defaultValue=email
            value=email
            onChange=(e) => setEmail(e.target.value)
          />
          errors.email && (
            <span className="text-danger mb-1 p-1">This field is required</span>
          )
        </FormGroup>" "
        <FormGroup className=errors.password ? "mb-2" : "mb-4">
          <Label for="password" hidden>
            Password
          </Label>
          <Input
            type="password"
            data-test="component-field"
            name="password"
            innerRef=register( required: true )
            defaultValue=password
            id="password"
            placeholder="Password"
            value=password
            onChange=(e) => setPassword(e.target.value)
            ref=register( required: true )
          />
          errors.password && (
            <span className="text-danger mb-1 p-1">This field is required</span>
          )
        </FormGroup>" "
        <Button size="sm" className="wb-primary-button font-weight-bold">
          Login
        `</Button>`

【问题讨论】：

我认为您的用法不正确，您在使用 react hook 表单时不应该真正看到 setState。我建议看一下 Controller 部分。

我只显示了表单代码。我的代码中有 setState 函数。我在第二个输入字段中使用了 ref，这是一个问题。感谢您的回复。

【参考方案1】：

从其作者的 GitHub 讨论中得到了答案。因为我使用了 reactstrap 库，所以我应该使用 innerRef 而不是引发错误的 ref 。在第二个 Input 元素中删除了 ref 然后它工作正常。