搜索和展示列表存在的bug

156 阅读1分钟

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: '',
          }
        )
      }

`