Javascript Can'；t访问词汇声明'callback'；初始化前

我是一个新的反应者，我被赋予了一项任务，将ES5代码重构为ES6代码，我得到了这个错误ReferenceError：在初始化之前，当我将函数重构为箭头函数时，无法访问词汇声明“callback”。我做错了什么

ES5代码

   const { values, errors, handleChange, handleSubmit } = useForm(
    // eslint-disable-next-line
    callback,validate
  );
  // load different redux state variables or read them from tegger api
  const userUUID = useSelector((state) => state.logged.profile.uuid);
  const answerLoading = useSelector((state) => state.logged.answersIsLoading);
  const dispatch = useDispatch();

  const formClasses = formStyles();

  // Dispatch answers to api and redirect to profile
  const callback = () =>{
    dispatch(loggedPostOnboarding(values, userUUID));
  }

  // Validate fields are filled
  const validate = () => {
    const error = {};
    if (isEmpty(values.f6039d44b29456b20f8f373155ae4973 || '')) {
      error.fullname = t('erros.fullName');
    }
    if (isEmpty(values['1f7b89b253833a6dd8cd456fb019eb47'] || '')) {
      error.gender = t('errors.requiredField');
    }
    return error;
  }

函数声明是。在求值过程中，首先解析所有函数声明-因此您可以在函数声明之前引用它

变量/常量赋值未被提升，因此必须在使用之前进行，如下所示：

const { values, errors, handleChange, handleSubmit } = useForm(
    // eslint-disable-next-line
    callback,validate
  );
  // load different redux state variables or read them from tegger api
  const userUUID = useSelector((state) => state.logged.profile.uuid);
  const answerLoading = useSelector((state) => state.logged.answersIsLoading);
  const dispatch = useDispatch();

  const formClasses = formStyles();

  // Dispatch answers to api and redirect to profile
  function callback(){
    dispatch(loggedPostOnboarding(values, userUUID));
  }

  // Validate fields are filled
  function validate(){
    const error = {};
    if (isEmpty(values.f6039d44b29456b20f8f373155ae4973 || '')) {
      error.fullname = t('erros.fullName');
    }
    if (isEmpty(values['1f7b89b253833a6dd8cd456fb019eb47'] || '')) {
      error.gender = t('errors.requiredField');
    }
    return error;
  }

---

您应该将回调声明移到顶部

  const dispatch = useDispatch();

  // Dispatch answers to api and redirect to profile
  const callback = () =>{
    dispatch(loggedPostOnboarding(values, userUUID));
  }

const { values, errors, handleChange, handleSubmit } = useForm(
    // eslint-disable-next-line
    callback,validate
  );
  // load different redux state variables or read them from tegger api
  const userUUID = useSelector((state) => state.logged.profile.uuid);
  const answerLoading = useSelector((state) => state.logged.answersIsLoading);

  const formClasses = formStyles();

  // Validate fields are filled
  const validate = () => {
    const error = {};
    if (isEmpty(values.f6039d44b29456b20f8f373155ae4973 || '')) {
      error.fullname = t('erros.fullName');
    }
    if (isEmpty(values['1f7b89b253833a6dd8cd456fb019eb47'] || '')) {
      error.gender = t('errors.requiredField');
    }
    return error;
  }

---

与函数声明相反，函数表达式未初始化。所以你必须表达（声明）高于消费者。 在此处阅读更多有关提升功能的信息：

毕竟，您应该知道，引入箭头函数并不是为了将所有函数声明迁移到它们（仅仅因为它们是javascript的新手）。它们绑定了上下文和它们自己的用例。最好不要滥用它们

// Dispatch answers to api and redirect to profile
// Declare callback before you use it in useForm function
const callback = () =>{
 dispatch(loggedPostOnboarding(values, userUUID));
}

const { values, errors, handleChange, handleSubmit } = useForm(
// eslint-disable-next-line
 callback,validate
);

const dispatch = useDispatch();

// Dispatch answers to api and redirect to profile
const callback = () =>{
  dispatch(loggedPostOnboarding(values, userUUID));
}

const { values, errors, handleChange, handleSubmit } = useForm(
  // eslint-disable-next-line
  callback,validate
);