Reactjs useReducer钩子错误ReferenceError：初始化之前无法访问'reducer'

Question

我正在通过阅读在线教程来学习 Reactjs 钩子。这是我的代码。我确信它可以改进。我收到了这个错误：-

ReferenceError: 在初始化之前无法访问“reducer”

    function ProfileForm(props) {
const form = useForm();
const {
  register,
  handleSubmit,
  errors,
  formState: { isSubmitting }
} = form;

const [profile, dispatch] = useReducer(reducer, profileInitSate)

const profileInitSate = {
  displayName: '',
  birthDate: '',
  height: 0,
}

const reducer = (state, action) =>{
    switch(action.type){
      case 'displayName' : 
        return {...state, displayName: action.value};

      case 'realName':
        return {...state, realName: action.value};

      case 'birthDate':
        return {...state, birthDate: action.value};          
      default:
        return state;          
    }  
}

useEffect(() => {
  if(props.location.state.profile){
      dispatch({type: 'dispalyName', 
      value: props.location.state.profile.displayName})
      dispatch({type: 'realName', 
      value: props.location.state.profile.realName})
      dispatch({type: 'birthDate', 
      value: props.location.state.profile.birthDate})
      dispatch({type: 'height', 
      value: props.location.state.profile.height})
  }

}, [profile]);

请告诉我如何改进此代码以及为什么会出现此错误？

Answer 1

正如 Asyush 在评论部分指出的那样并对其进行解构以使其更清洁，其余部分看起来不错，尽管我建议将减速器保存在单独的文件中

      function ProfileForm(props) {
    const form = useForm();
    const {
      register,
      handleSubmit,
      errors,
      formState: { isSubmitting }
    } = form;

    const profileInitSate = {
      displayName: '',
      birthDate: '',
      height: 0,
    }

    const reducer = (state, action) =>{
        switch(action.type){
          case 'displayName' : 
            return {...state, displayName: action.value};

          case 'realName':
            return {...state, realName: action.value};

          case 'birthDate':
            return {...state, birthDate: action.value};          
          default:
            return state;          
        }  
    }
// Change the name to avoid conflict because of destructure
   const [profileReducer, dispatch] = useReducer(reducer, profileInitSate)    

   let {profile} = props.location.state;

   let {displayName,realName,birthDate,height}=profile;

    useEffect(() => {
      if(props.location.state.profile){
          dispatch({type: 'dispalyName', 
          value: displayName})
          dispatch({type: 'realName', 
          value: realName})
          dispatch({type: 'birthDate', 
          value: birthDate})
          dispatch({type: 'height', 
          value: height})
       }

      }, [profileReducer]);