Reactjs 如何将类组件中的嵌套状态更改为功能组件中的状态？

我在类组件中有一些嵌套状态，我想将其更改为functional component，但我不知道如何使用带有钩子的functional component中的嵌套状态和

useState

以及

useffect

？你能帮我吗

状态={
产品：空，
总价：0，
地址计数器：0，
购买：假，
加载：false，
表格：{
姓名：{
elementType:'输入'，
elmentConfig：{
键入：“文本”，
palceholder:'名称…'，
},
值：“”，
验证：{
要求：正确，
},
有效：假，
用法：false，
},
密码：{
elementType:'输入'，
elmentConfig：{
键入：“密码”，
palceholder:'密码…'，
},
值：“”，
验证：{
要求：正确，
},
有效：假，
用法：false，
},
电邮：{
elementType:'输入'，
elmentConfig：{
键入：“文本”，
palceholder:“电子邮件…”，
},
值：“”，
验证：{
要求：正确，
},
有效：假，
用法：false，
},
},
};

您可以尝试：

const [formElements, setFormElements] = useState({
  products: null,
  totalPrice: 0,
  addCounter: 0,
  purchased: false,
  loading: false,
  form: {
    name: {
      elementType: 'input',
      elmentConfig: {
        type: 'text',
        palceholder: 'Name...',
      },
      value: '',
      validation: {
        required: true,
      },
      valid: false,
      used: false,
    },
    password: {
      elementType: 'input',
      elmentConfig: {
        type: 'password',
        palceholder: 'Password...',
      },
      value: '',
      validation: {
        required: true,
      },
      valid: false,
      used: false,
    },
    email: {
      elementType: 'input',
      elmentConfig: {
        type: 'text',
        palceholder: 'Email...',
      },
      value: '',
      validation: {
        required: true,
      },
      valid: false,
      used: false,
    },
  },
});

通过使用此选项，初始状态可以在

formElements

中使用，要更新初始状态，可以使用

setFormElements

函数

---

使用useState转换您的状态，但是我建议将您的状态分离为较小的“状态”，以使其更易于管理，并且没有深度嵌套的值

例如

注意。您可以从useState钩子中获取您的状态，只要在初始化状态后调用状态名称即可

在处理深度嵌套的状态时，设置状态可能会变得复杂，因此对于每个状态imho来说，“越浅”越好

---

请参阅此处的文档：使用等效类示例

您是否知道您正在为

更改哪个状态，例如state.form.elementConfig.placeholder

？@AaminKhan:I wnat一次性更改所有状态？这是否意味着你只想替换它？@Aaminkan:事实上，这个状态是在类组件上的，现在我想把这个状态用于功能组件，我想知道如何将类组件的状态更改为功能组件？谢谢，那么我如何使用它们来更改状态呢？例如，我想更改所需的状态？那我该怎么做呢？我想让你看看这个堆栈响应：比我能表达的好得多：）

const [checkout, setCheckout] = useState({
    products: null,
    totalPrice: 0,
    addCounter: 0,
    purchased: false,
    loading: false
});

const [userForm, setUserForm] = useState({
    name: {
        elementType: 'input',
        elementConfig: {
           type: 'text',
           placeholder: 'Name...'
        },
        value: '',
        validation: {
            required: true
        },
        valid: false,
        used: false,
    },
    password: {
        elementType: 'input',
        elementConfig: {
            type: 'password',
            placeholder: 'Password...'
        },
        value: '',
        validation: {
            required: true
        },
        valid: false,
        used: false,
    },
    email: {
        elementType: 'input',
        elementConfig: {
            type: 'text',
            palceholder: 'Email...'
        },
        value: '',
        validation: {
            required: true
        },
        valid: false,
        used: false,
    }
});