如何将多个函数合并为一个函数

Question

我想知道我是否可以将以下功能优化为一个或两个功能而不是四个。这是代码的链接

  // 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,

    }));

  };

Answer 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('');// etcconst 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);

Answer 2

这是我试图解决您的困境的方法。const nextStep = (newValues, incrementCount) => {setInputValue((prevState) => ({  ...prevState,  ...newValues,  step: prevState.step + (incrementCount ? incrementCount : 1)}));};您可以在此处查看完整代码。

Answer 3

在我看来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  }));};