根据反应中的用户输入过滤表结果

Question

目前的功能是 只有当用户点击submit 按钮时才会加载数据。如果他没有放任何filter，那么所有数据都会被加载。

 const submit = async (e: SyntheticEvent) => {
        e.preventDefault();
        const param = {
            ...(certificateNo && { certificateNo: certificateNo }),
            ...(protoColNo && { protoColNo: protoColNo }),
            ...(requestStatus && { requestStatus: requestStatus }),
            ...(sponser && { sponser: sponser }),
            ...(country && { country: country }),
            ...(noOfSubjects && { noOfSubjects: noOfSubjects }),
            ...(startDate && { startDate: startDate }),
            ...(endDate && { endDate: endDate }),
        };
        console.log(param);
        const { data } = await axios.get('http://localhost:3000/api/certificates', {
            params: param,
        });
        console.log(data);
        setFlag(true);
        setResponse(data);
    };

现在我有一个要求。当page 获取没有任何filter 的加载数据时，应该在页面上加载。表示用户访问时可以看到页面上的数据，稍后他可以在点击提交按钮后应用过滤器。

我正在考虑使用 useEffect() ，你能指导一下如何做到这一点。

我在这里放了下一个和上一个代码

 const [page, setPage] = useState(1);
 const [lastPage, setLastPage] = useState(0);




const next = () => {
        if (page <= lastPage) {
          setPage(page + 1);
          fetchData(page);
        }
      }

和以前的

const prev = () => {

        if (page >= 1) {
          setPage(page - 1);
        }
      }

下面是我创建的按钮

  <ul className="pagination">
          <li className="page-item">
            <button onClick={prev}>Previous</button>
          </li>
          <li className="page-item">
            <button onClick={next}>Next</button>
          </li>
        </ul>

Answer 1

既然你有你的后端过滤机制。只需创建一个包含所有过滤器数据的状态。创建一个函数fetchData 来完成获取工作。当用户第一次访问fetchData 内的useEffect 时，将被调用，此时所有过滤器都将为空，因此应加载所有数据。应用过滤器后，如果用户提交了submit 中的按钮 fetchData 函数，将调用事件。并为分页机制保持另一种状态。如果要获取下一页的记录，只需增加page 状态

const [filters,setFilters]=useState({
    certificateNo:"",
    protoColNo:"",
    requestStatus:"",
    sponser:"",
    country:"",
    noOfSubjects:"",
    startDate:"",
    endDate:"",
})
const [page,setPage] = useState(1)
const fetchData = async (page)=>{
    const {
        certificateNo,
        protoColNo,
        requestStatus,
        sponser,
        country,
        noOfSubjects,
        startDate,
        endDate,
    } = filters

    const param = {
        ...(certificateNo && { certificateNo: certificateNo }),
        ...(protoColNo && { protoColNo: protoColNo }),
        ...(requestStatus && { requestStatus: requestStatus }),
        ...(sponser && { sponser: sponser }),
        ...(country && { country: country }),
        ...(noOfSubjects && { noOfSubjects: noOfSubjects }),
        ...(startDate && { startDate: startDate }),
        ...(endDate && { endDate: endDate }),
    };
    console.log(param);
    const { data } = await axios.get(`http://localhost:3000/api/certificates?page=${page}`, {
        params: param,
    });
    setFlag(true);
    setResponse(data);
}
const submit = async (e: SyntheticEvent) => {
    e.preventDefault();
    fetchData(page)
};

useEffect(()=>{
    fetchData(page)
},[page])