Блог

Главная - Вопросы по программированию - Как объединить несколько функций в одну функцию

Как объединить несколько функций в одну функцию

#javascript #reactjs

#javascript #reactjs

Вопрос:

Мне было интересно, могу ли я оптимизировать следующие функции в одну или две функции вместо четырех. Вот ссылка на код

   // Proceed to next step
  const firstStep = (firstName, lastName) => {
    setInputValue((prevState) => ({
      ...prevState,
      step: prevState.step   1,
      firstName: firstName,
      lastName: lastName,
    }));
  };
  // Proceed to next step
  const secondStep = (email, password) => {
    setInputValue((prevState) => ({
      ...prevState,
      step: prevState.step   1,
      email: email,
      password: password,
    }));
  };

  const thirdStep = () => {
    setInputValue((prevState) => ({
      ...prevState,
      step: prevState.step   1,
    }));
  };

  const fourthStep = () => {
    setInputValue((prevState) => ({
      ...prevState,
      step: prevState.step   2,
    }));
  };

Комментарии:

1. Чего вы надеетесь достичь, объединив эти функции? Кажется, что все они делают немного разные вещи. Это опечатка для fourthStep функции, чтобы добавить 2 к шагу?

2. @DrewReese четвертое — не опечатка. Вы правы. Все эти функции выполняют немного разные функции. Я думал, что я делаю что-то не так, если я повторяю функции с небольшой разницей в том, чего они достигают

3. Ну, если цель состоит в том, чтобы быть более сухим, тогда вы можете определить, что такое «абстрактно» та же функциональность, например, увеличение шага на некоторую величину и обновление некоторого состояния. Я думаю, что @CertainPerformance работает над этим.

Ответ №1:

Один из подходов заключается в создании функции, которая, учитывая количество шагов и новый объект для слияния с существующим состоянием, вызывает setInputValue с требуемым объединенным объектом:

 const setStep = (newProps, stepIncrement) => {
  setInputValue((prevState) => ({
    ...prevState,
    ...newProps,
    step: prevState.step   stepIncrement,
  }));
};

Тогда вместо firstStep(firstName, lastName) вы можете сделать setStep({ firstName, lastName }, 1) и так далее.

Поскольку вы используете хуки, другим вариантом было бы использовать отдельные переменные состояния и функции:

 const [step, setStep] = useState(1);
const [firstName, setFirstName] = useState('');
// etc
  
 const firstStep = (firstName, lastName) => {
  setFirstName(firstName);
  setLastName(lastName);
  setStep(step   1);
};
const secondStep = (email, password) => {
  setEmail(email);
  setPassword(password);
  setStep(step   1);
};
const thirdStep = () => setStep(step   1);
const fourthStep = () => setStep(step   2);

Ответ №2:

с моей точки зрения

 const step = ({ firstName = "", lastName = "", email = "", password = "", step = 0 }) => {
  setInputValue(prevState => ({
    ...prevState,
    step: prevState.step   step,
    firstName: firstName || prevState.lastName,
    lastName: lastName || prevState.lastName,
    email: email || prevState.email,
    password: password || prevState.password
  }));
};

Ответ №3:

Вот то, что я пытался решить вашу дилемму.

 const nextStep = (newValues, incrementCount) => {
setInputValue((prevState) => ({
  ...prevState,
  ...newValues,
  step: prevState.step   (incrementCount ? incrementCount : 1)
}));
};

Вы можете увидеть полный код здесь.