时间戳

首页 > 解决方案 > formik 嵌套动态对象

reactjs - formik 嵌套动态对象

问题描述

您能否就以下问题提出解决方案：

例如，我们有一个包含许多交付选项的结帐表格，每个选项都需要不同的详细信息，例如：

状态示例：

...,
delivery: {
  type: 'inStore',
  details: { storeId: 1 }
}

或者

...,
delivery: {
  type: 'courier',
  details: {
    address: {
      street: '12 Ave',
      ...,
     }
   }
 }

一旦只能检查上述选项之一，我就尝试使用单选按钮组件来定义 adelivery type 此外，可以基于delivery type（例如通过 switch-case）呈现不同的组件并填充不同的delivery.___字段。

但是，如果我们为选项填写表格，inStore然后切换到例如courier选项，则该storeId属性仍处于该状态。那么如何正确处理此开关（仅根据 selected 保留所需的属性delivery type）

标签： reactjsformik

解决方案

就目前而言，我已将子表单状态重置添加到单选按钮onChange事件处理程序。因此基于新的单选按钮值（例如deliveryType）计算出新的初始状态（例如deliveryDetails）。

正因为如此，newdeliveryType和 newinitialState允许渲染相关的子表单没有任何麻烦。

请在此处查看解决方案：https ://codesandbox.io/s/formik-example-forked-ix0nt?file=/deliveryDetailsForm.js

值得一提的是，需要先更新子表单初始状态，再更新因变量（如deliveryType）。因此，只要在呈现所需的子表单之前values.delivery.details更新对象，就不会发生“受控到不受控”错误。

PS 当前的解决方案用于switch-case决定initialState应该渲染哪个子表单和哪个子表单，这是一个非常糟糕的设计，所以如果你有任何关于如何让它变得更好的建议，我会很高兴听到它们。

推荐阅读