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

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

// 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);

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

  }));

};