React组件报错：Cannot access 'stateRegister' before initialization 求助

错误原因 #

你代码里的stateRegister是在useEffect钩子之后用const声明的，而const变量不存在变量提升，导致useEffect的依赖数组和内部代码在执行时，stateRegister还未被初始化，所以抛出了这个错误。

修复方案 #

1. 将stateRegister的声明移到useEffect之前，确保在钩子执行前变量已初始化。
2. 优化useEffect逻辑：利用watch的回调实时同步表单状态到父组件，避免依赖stateRegister触发不必要的重渲染。

修改后的完整代码 #

import * as React from 'react';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import propTypes from 'prop-types';
import { useForm } from 'react-hook-form';

export default function BasicForm(props) {
  const {
    register,
    formState: { errors },
    watch,
  } = useForm({
    mode: 'all',
  });

  // 提前声明stateRegister，确保useEffect能访问到
  const stateRegister = watch();

  React.useEffect(() => {
    // 初始化时同步一次表单状态
    props.stateOfRegister(stateRegister);
    
    // 通过watch回调实时监听表单变化，同步到父组件
    const subscription = watch((updatedValues) => {
      props.stateOfRegister(updatedValues);
      console.log('表单更新:', updatedValues);
    });

    return () => subscription.unsubscribe();
  }, [watch, props]); // 移除stateRegister依赖，避免不必要的重渲染

  console.log('errors: ', errors);
  console.log('当前表单状态:', stateRegister);

  return (
    <React.Fragment>
      <Typography variant="h6" gutterBottom>
        注册信息填写
      </Typography>
      <Typography variant="caption" color="red" gutterBottom>
        所有字段为必填项 *
      </Typography>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <TextField
            required
            id="username"
            name="username"
            label="用户名"
            fullWidth
            autoComplete="username"
            variant="standard"
            {...register('username', {
              required: '用户名不能为空',
              minLength: {
                value: 3,
                message: '用户名至少需要3个字符',
              },
              maxLength: {
                value: 30,
                message: '用户名最多不能超过30个字符',
              },
            })}
            helperText={errors.username?.message}
          />
        </Grid>
        <Grid item xs={12}>
          <TextField
            required
            id="login"
            name="login"
            label="邮箱"
            type="email"
            fullWidth
            autoComplete="email"
            variant="standard"
            {...register('login', {
              required: '邮箱不能为空',
              pattern: {
                value:
                  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
                message: '请输入有效的邮箱地址',
              },
            })}
            helperText={errors.login?.message}
          />
        </Grid>
        <Grid item xs={12}>
          <TextField
            required
            id="password"
            name="password"
            label="密码"
            type="password"
            minLength="8"
            fullWidth
            autoComplete="password"
            variant="standard"
            {...register('password', {
              required: '密码不能为空',
              pattern: {
                value:
                  /^(?=.*[0-9])(?=.*[!@#$%^&*.,])[a-zA-Z0-9!@#$%^&*.,]{6,16}$/,
                message:
                  '密码必须包含至少6个字符，且包含大小写字母、数字和特殊字符',
              },
            })}
            helperText={errors.password?.message}
          />
          {stateRegister.password}
        </Grid>
        <Grid item xs={12}>
          <FormControlLabel
            control={
              <Checkbox color="secondary" name="saveLogin" value="yes" />
            }
            label="保持登录状态"
          />
        </Grid>
      </Grid>
    </React.Fragment>
  );
}

BasicForm.propTypes = {
  stateOfRegister: propTypes.func,
};

关键修改说明 #

• 把const stateRegister = watch();移到了useEffect之前，解决了变量未初始化的问题。
• 修改useEffect内部逻辑：通过watch的回调函数实时获取更新后的表单值，同步给父组件，同时移除了依赖数组里的stateRegister，避免每次表单变化都触发useEffect重新订阅。
• 把界面文本翻译成了中文，更符合国内使用场景。

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