使用CRA+React Hook Form+Reactstrap构建后出现TypeError求助

我之前也踩过类似的坑，这个错误看起来有点莫名其妙，但根源其实是你混合了React Hook Form的非受控注册模式和手动维护的受控组件状态，而且生产环境的代码压缩把这个隐藏的冲突放大了。

问题分析 #

看你的代码，每个Input组件都同时做了两件矛盾的事：

• 用innerRef={register(...)}让React Hook Form接管表单控件的状态管理
• 又手动维护了email/password的本地state，加上了value={email}和自定义onChange事件处理

更关键的是，密码输入框还同时用了ref={register(...)}和innerRef={register(...)}——Reactstrap的Input组件需要用innerRef来接收DOM ref，直接用ref是无效的，这会导致RHF无法正确注册控件，在生产环境的压缩代码里就触发了split调用的错误（内部某个预期的字段名变成了undefined）。

解决方案 #

这里有两种推荐的修复方式，选一种适合你的场景：

方案1：改用React Hook Form的非受控模式（推荐）

既然用了RHF，就让它来管理表单状态，不用自己维护email/password的本地state，这样代码更简洁，也彻底避免状态冲突：

import { useForm } from "react-hook-form";
import { Form, FormGroup, Label, Input, Button } from "reactstrap";

const LoginForm = () => {
  const { register, handleSubmit, errors } = useForm({ 
    mode: "onSubmit", 
    reValidateMode: "onBlur", 
  });

  const submitHandler = (data) => {
    // 这里的data会自动包含email和password字段，直接使用即可
    console.log("登录数据：", data);
    // 你的登录逻辑写在这里
  };

  return (
    <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" 
        />
        {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 })} 
          id="password" 
          placeholder="Password" 
        />
        {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>
    </Form>
  );
};

export default LoginForm;

方案2：如果必须用受控模式（自己维护state）

这种情况需要用RHF的Controller组件来包裹Reactstrap的Input，统一协调受控状态和RHF的表单校验：

import { useForm, Controller } from "react-hook-form";
import { Form, FormGroup, Label, Input, Button } from "reactstrap";
import { useState } from "react";

const LoginForm = () => {
  const { control, handleSubmit, formState: { errors } } = useForm({ 
    mode: "onSubmit", 
    reValidateMode: "onBlur", 
  });
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const submitHandler = (data) => {
    console.log("登录数据：", data);
    // 你的登录逻辑写在这里
  };

  return (
    <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>
        <Controller
          name="email"
          control={control}
          rules={{ required: true }}
          render={({ field }) => (
            <Input 
              type="text" 
              data-test="component-field" 
              id="email" 
              placeholder="Email" 
              value={email}
              onChange={(e) => {
                field.onChange(e); // 同步RHF的状态
                setEmail(e.target.value); // 同步本地state
              }}
            />
          )}
        />
        {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>
        <Controller
          name="password"
          control={control}
          rules={{ required: true }}
          render={({ field }) => (
            <Input 
              type="password" 
              data-test="component-field" 
              id="password" 
              placeholder="Password" 
              value={password}
              onChange={(e) => {
                field.onChange(e); // 同步RHF的状态
                setPassword(e.target.value); // 同步本地state
              }}
            />
          )}
        />
        {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>
    </Form>
  );
};

export default LoginForm;

为什么开发环境没问题，生产环境才报错？ #

开发环境的代码没有经过压缩，React Hook Form的内部错误处理逻辑可能没有触发；而生产环境的代码会被压缩优化，变量名被简化（比如错误里的L就是压缩后的函数名），同时更严格的运行时检查会把这种混合模式的冲突暴露出来。

内容的提问来源于stack exchange，提问作者Dhananjayan