需求是点击修改框 然后显示一个Modal框,里面有点击部门的相关权限
![在这里插入图片描述](https://img-blog.csdnimg.cn/461c1d04974b42edb1bb601b6beb9cc3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yav5p-P6b6Z,size_20,color_FFFFFF,t_70,g_se,x_16)
![在这里插入图片描述](https://img-blog.csdnimg.cn/3bc8d144c1c44b1dac9b093df04c541c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yav5p-P6b6Z,size_20,color_FFFFFF,t_70,g_se,x_16)
把点击的数据传进Form组件initialValues,出现bug 数据改变了但是默认值为上一次点击的值!!
可以看到化工学院的值变成上一次点击的信息学院的值
![](https://img-blog.csdnimg.cn/87b4bbe7f5f34d85844b2117ab616827.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yav5p-P6b6Z,size_20,color_FFFFFF,t_70,g_se,x_16)
再次点击恢复正常
![在这里插入图片描述](https://img-blog.csdnimg.cn/5d6ebc0e94e04e94b8a5fef7e2ccccbc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yav5p-P6b6Z,size_20,color_FFFFFF,t_70,g_se,x_16)
再点信息学院,变成化工学院
![在这里插入图片描述](https://img-blog.csdnimg.cn/6dcdca9d13334fb7afc753f5599a26fb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yav5p-P6b6Z,size_20,color_FFFFFF,t_70,g_se,x_16)
关键代码:
<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>
解决
![在这里插入图片描述](https://img-blog.csdnimg.cn/80867890403740f9823103e0b9dfe913.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yav5p-P6b6Z,size_20,color_FFFFFF,t_70,g_se,x_16)
![在这里插入图片描述](https://img-blog.csdnimg.cn/47fb5ecb33b44f95bef890b1053e40c9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yav5p-P6b6Z,size_20,color_FFFFFF,t_70,g_se,x_16)
人麻了,我一开始以为是React的问题,是不是useState异步导致的,改成useReduce还是不行,这才想到是不是antd的问题