基于react的MQ管理系统遇到的问题以及解决办法

跟一般的管理系统差不多

一、需求

1.新增申请和修改的弹窗里面的部门跟应用组改成下拉框，并调取后台接口获取到相应的值。
1.1相应的代码
// 获取部门
getDepartment = () => {
promiseAjax.get('/org/departments/findDeptList?level=4').then(res => {
if (res.code === '0') {
let productDeptObj = this.state.productDeptObj;
res.data.forEach(item => {
productDeptObj[item.id] = item;
});
console.log(productDeptObj, 'q1111');
this.setState({productDept: res.data || [], productDeptObj});
} else {
message.error(res.message);
}
});
}
form表单里面
<Select onChange={this.handleChangeProductDept}>
{
productDept.map(item => {ß
return <Option key={item.id} value={item.id}>{item.deptName}</Option>;
})
}
</Select>
// 获取应用组
handleChangeProductDept = (id) => {
const {setFieldsValue} = this.props.form;
setFieldsValue({productGroupProduct: undefined});
promiseAjax.get(`/org/thirdparty/dept/group?id=${id}&level=5`).then(res => {
if (res.code === '0') {
let productGroupObj = this.state.productGroupObj;
res.data.forEach(item => {
productGroupObj[item.id] = item;
});
this.setState({productGroup: res.data, productGroupObj});
} else {
message.error(res.message);
}
});
}
form表单里面
<Select>
{
productGroup.map(item => {
return <Option key={item.id} value={item.id}>{item.name}</Option>;
})
}
</Select>

在state里面声明productDept：[],productGroup:[],请求成功this.setState({productGroup/productDept:res.data});
在表单中分别遍历两个数组

获取部门数据后台参数
data: [{id: "1231648600", deptName: "商户事业部"}, {id: "1746345310", deptName: "综合管理部"},…]
0: {id: "1231648600", deptName: "商户事业部"}
1: {id: "1746345310", deptName: "综合管理部"}
2: {id: "1879685755", deptName: "研发部"}
3: {id: "1889850226", deptName: "人事行政部"}
4: {id: "688950687", deptName: "财务部"}
此时item是data的每一组对象，也就是01234中的所有值，所以展示出来的部门名称是item.deptName，此时的value是item.id

获取应用组数据后台参数
data: [{id: "1388050926", name: "招聘组"}, {id: "1311206076", name: "发展组"}]
0: {id: "1388050926", name: "招聘组"}
1: {id: "1311206076", name: "发展组"}
此时的item同上，所以展示出来的应用组名称是item.name,此时的value 是item.id

二、遇到的问题以及解决办法
1.在向后台传递参数的时候，后台需要4个参数，分别是部门名称、部门id、应用组名称、应用组id，而此时表单中获取到的是部门id和应用组id，所以我们必须通过这个id去获取到对应的name，
但是通过后台传递的数据可以看出id和name是同级并列的，看似没有任何关系，那么如何获取
以部门为例：我们可以知道现在id和deptName是包在同一个对象里面的，那么首先我声明一个空的对象producDeptObj{},

然后在获取部门的方法里遍历
res.data.forEach(item => {
productDeptObj[item.id] = item; 将数组的整体赋给id，此时的id里面包含id和deptName,
接下来如果想获取到name 只需productDeptObj[item.id].name就可以了。
});

在点击提交的时候 const department = this.state.productDeptObj[fieldsValue.department1].deptName; // 获取到部门名称
const department = this.state.productDeptObj[values.department1] ? this.state.productDeptObj[fieldsValue.department1].deptName : '';
// 做一个判断，如果后台数据有问题为了防止报错，先判断一下
this.state.productDeptObj[values.department1]是否可以取到，
如果可以再去取对应的name，如果取不到就返回一个空。
注意⚠️
this.state.productDeptObj[values.department1] 之所以可以用this.state可以取到 productDeptObj，
是因为在获取部门的方法里面 setState了productDeptObj
this.setState({productDept: res.data || [], productDeptObj});

以上是我在做项目的时候遇到的问题，可能很简单，但是当时也是把自己难住了，希望可以帮助遇到以上问题的小伙伴们，第一次写博客还有很多不足之处，希望多多包涵！

巴特西

基于react的MQ管理系统遇到的问题以及解决办法

最新文章

热门文章