1.搜索和展示列表之间的bug
1.1-bug产生的原因:
搜索条件为下拉选项时,当用户只选择了下拉选项的值,未点击搜索按钮,此时react会将下拉选择的值存在state中,当后续的其它操作会使用到这个值时,会将选择的值当参数进行调取,例如,列表的分页,排序,筛选,导出功能,都会受到影响。
1.2-解决bug的思路:
最直接的判断就是用户是否点击了搜索按钮。state的字段是单独存在的,不需要改变,只是在搜索按钮点击后,将此时state的字段都拿出来,作为后续功能请求借口的字段
1.3-代码展示:
`
const [middleSave, setMiddleSave] = useState(
{
dataName: '',
itemName: '',
demandUnit: '',
provideUnitId: ''
}
)
useEffect(() => {
getSupplyFailureList(); //对中间变量进行监听
}, [pageNum, pageSize, status, middleSave]);
const getSupplyFailureList = () => { //请求接口将点击搜索后的值带入
dispatch({
type: 'supplyFailure/getSupplyFailureList',
payload: {
pageSize,
pageNum,
statusList: status.toString(),
...middleSave
},
});
};
const searchFun = () => { //点击搜索将值存在state中
setPageNum(1)
setMiddleSave({
dataName,
itemName,
demandUnit,
provideUnitId,
})
}
const reset = () => { //点击重置后将值清空
setDataName('')
setItemName(undefined)
setDemandUnit(undefined)
setProvideUnitId(undefined)
setPageNum(1)
setMiddleSave(
{
dataName: '',
itemName: '',
demandUnit: '',
provideUnitId: '',
}
)
}
`