需求是点击修改框 然后显示一个Modal框,里面有点击部门的相关权限
把点击的数据传进Form组件initialValues,出现bug 数据改变了但是默认值为上一次点击的值!!
可以看到化工学院的值变成上一次点击的信息学院的值
再次点击恢复正常
再点信息学院,变成化工学院
关键代码:
<Modal destroyOnClose={true} title={state.DepartmentName} visible={state.isModalVisible} onOk={handleOk} onCancel={handleCancel}>
<Form
preserve={false}
form={form}
name="basic"
labelCol={{
span: 4,
}}
wrapperCol={{
span: 20,
}}
initialValues={
{
router: state.InitRoute,
api: state.InitApi,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="路由权限"
name="router"
>
<Checkbox.Group options={routeList.map((value) => {
return { value: value.routeId, label: RouterMaper.get(value.routeName) }
})}
/>
</Form.Item>
<Form.Item
label="操作权限"
name="api"
>
<Checkbox.Group options={apiList.map((value) => {
return { value: value.apiId, label: ApiMaper.get(value.apiName) }
})} />
</Form.Item>
</Form>
</Modal>
修改成下面代码后(把初始值直接赋给Checkbox),解决:
<Modal destroyOnClose={true} title={state.DepartmentName} visible= {state.isModalVisible} onOk={handleOk} onCancel={handleCancel}>
<Checkbox.Group defaultValue={state.InitRoute} options={routeList.map((value) => {
return { value: value.routeId, label: RouterMaper.get(value.routeName) }
})}
/>
<Checkbox.Group defaultValue={state.InitApi} options={apiList.map((value) => {
return { value: value.apiId, label: ApiMaper.get(value.apiName) }
})} />
</Modal>
解决
人麻了,我一开始以为是React的问题,是不是useState异步导致的,改成useReduce还是不行,这才想到是不是antd的问题