使用Reaction钩子中的公共函数设置多个状态 [英] Setting Multiple state using common function in React Hooks

问题描述

我在最近的项目中遇到了一个问题，其中我有一个表单，其中包含基本的用户详细信息，如First Name、Last Name、Email、Mobile No、OTP。这些字段是我在react-hook中创建的状态。 现在，我必须编写一个handleInputChange函数，该函数将接受两个参数作为输入，并更新该字段的相应状态值。

另外，如果在我的handleInputChange中设置状态之前也必须触发validation函数，那么如何实现它。

请向我推荐optimal解决方案，以便将来如果我的UI中有10+个字段，如何动态更新它们的状态。

下面的代码片段属于我的Class-based组件，类似于我希望通过functional组件中的React-Hooks实现的行为。

初始状态声明：

this.state = {
      name: { value: "", error: "" },
      city: { value: "", error: "" },
      email: { value: "", error: "" },
      contact_number: { value: "", error: "" },
      otp_data: {}
    };

我的handleInputChange函数：

handleInputChange = (name, value) => {
    let label = "";
    this.setState({
      [label]: {
        ...this.state[label],
        value: value,
        error: validateFields(label, value)
      }
    });
  };

推荐答案

始终建议为每个变量创建单独的状态。在功能组件中，可以使用useState，如下所示

const [name, setName] = useState({ value: "", error: "" });
const [city, setCity] = useState({ value: "", error: "" });
const [email, setEmail] = useState({ value: "", error: "" });
const [contact_number, setContactNumber] = useState({ value: "", error: "" });
const [otp_data, setOtpData] = useState({ value: "", error: "" });

// Mapping of label with state changer
const labelStateMap = {
        name: setName,
        city: setCity,
        email: setEmail,
        contact_number: setContactNumber,
        otp_data: setOtpData
}

handleInputChange = (label, value) => {
    const stateChanger = labelStateMap[label];
    if(stateChanger){
        stateChanger({
            value,
            error: validateFields(label, value)
        })
    }
  };

这篇关于使用Reaction钩子中的公共函数设置多个状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！