Question

我想知道是否可以将以下功能优化为一个或两个功能，而不是四个。这是指向code

的链接

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

Answer 3

这是我试图解决您的困境的事情。

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

您可以看到完整的代码here。

如何将多个功能合并为一个功能

3 个答案: