Antd Form 表单数据没法回显问题
Antd Form 表单数据没法回显问题
antd 环境
4.*版本
问题复现
在一个组件中，给这个组件传递一个配置项，展示一些表单组件如 输入框、下拉框等组件，再传递一个数据，让其数据回显在我们的表单组件中
// 就正常一个表单，里面通过循环配置项展示formitem 里的内容，我们可以在formitem中设置initvalue来给这个表单赋值，也可以通过给那些组件中设置value来给这个表单赋值，但是由于我们的表单数据是hook传递的，initvalue原理在表单初始化的时候给表单赋值，且这个initvalue必须是同步数据，不能为hook数据，因为setstate 是异步的，官方原话
- 你不再需要也不应该用 onChange 来做数据收集同步（你可以使用 Form 的 onValuesChange），但还是可以继续监听 onChange 事件。
- 你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValue 来设置。注意 initialValue 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。
- 你不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值。
怎么解决这个问题呢？只能通过 setFieldsValue?
我们可以给组件加一个 loading 态，当我们的数据还没准备好的时候不要让其加载我们的表单组件
<MyRoutes
confgi={...}
data={...}
loading={...}
/>
// 组件中可以这样
if(loading){
return (<div>loading</div>)
}
return <div>我们的表单组件</div>
这个循环的是一个 hook state 参数 这个里面的 formitem initvalue 为啥初始值不生效
❓：解决方法罗列
💡：
🔴 、在 React 中，如果 FormItem 的 <span style="background-color:#00a6691a ;font-size:14px; color:#00a669; padding:6px;border-radius:5px;">initialValue</span> 不生效，可能有几个原因。以下是一些常见的问题和相应的解决方案：
🟢 .1、
表单控件已经被用户交互过：
如果表单控件已经被用户交互过，那么设置的 initialValue 可能不会生效，因为表单控件的状态已经被改变。确保在用户交互之前设置 initialValue。
🟢 .2、
表单已经提交：
如果表单已经提交过，即使重新渲染组件，initialValue 也可能不会重置表单控件的状态。你可能需要手动重置表单状态。
🟢 .3、
表单控件的值被控制：
如果你使用的是受控组件（即其值被 state 或 props 控制），那么 initialValue 可能不会生效。你需要确保控件的值与表单状态同步。
🟢 .4、
initialValue 在表单初始化后被设置：
initialValue 应该在表单初始化时设置。如果你在表单初始化后设置 initialValue，它可能不会生效。
🟢 .5、
错误的 initialValue 数据类型：
确保提供给 initialValue 的数据类型匹配表单控件期望的数据类型。例如，如果是 Checkbox 组件，initialValue 应该是布尔值。
🟢 .6、
表单字段已经有值：
如果表单字段已经有值，initialValue 将不会覆盖现有的值。你可能需要考虑是否有其他地方已经为该字段设置了值。
🟢 .7、
表单实例的问题：
如果你使用了 Form 实例的话，确保 FormItem 是 Form 实例的一部分，并且 initialValue 是在表单实例创建时设置的。
🟢 .8、
重复的 name 属性：
如果表单中有多个 FormItem 使用了相同的 name 属性，可能会导致 initialValue 设置不生效。
🟢 .9、
使用了动态 name 属性：
如果 FormItem 的 name 属性是动态生成的，确保在渲染 FormItem 之前 name 已经正确地计算出来。
🟢 .10、
如果问题依然存在，尝试以下的排错方法：
排除外部因素：尝试在一个简单的环境（新的表单和控件）中设置 initialValue，看看是否能够正常工作。
检查更新日志：如果你在使用第三方库（如 Ant Design 的 Form 组件），检查更新日志和文档，看看是否有任何关于 initialValue 的已知问题或变更。
使用表单的 resetFields 方法：在一些情况下，你可能需要使用表单的 resetFields 方法来重置一个或多个字段到它们的 initialValue。
跟踪状态：追踪 selectedObject 的状态，确保在 FormItem 渲染前状态已经正确设定。
