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

【问题标题】：How can I change nested state in class component to state in functional component?如何将类组件中的嵌套状态更改为功能组件中的状态？
【发布时间】：2021-03-01 16:49:01
【问题描述】：

我在类组件中有一些嵌套状态，我想将其更改为功能组件，但我不知道如何在具有钩子和useState 以及useEffect 的功能组件中使用嵌套状态？你能帮帮我吗？

state = {
  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,
    },
  },
};

【问题讨论】：

你知道你正在为eg. state.form.elementConfig.placeholder改变哪个状态吗？
@AaminKhan：我想改变所有这些
一口气？这是否意味着您只想替换它？
@AaminKhan：实际上这个状态是在一个类组件上，现在我想把这个状态用于功能组件，我想知道如何将类组件的状态更改为功能组件？

标签： reactjs state

【解决方案1】：

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

例如。

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

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

在使用深度嵌套的状态时设置状态可能会变得复杂，因此对于每个状态而言，“越浅”越好。

在此处查看文档：https://reactjs.org/docs/hooks-state.html 以及等效的类示例

【讨论】：

谢谢，那我怎么用它们来改变状态呢？例如。我想改变状态？那我该怎么做呢？
我建议您参考这个堆栈响应：stackoverflow.com/questions/57798841/… 比我能表达的要好得多 :)

【解决方案2】：

你可以试试：

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 函数来更新它。

Reference

【讨论】：