Formik提交按钮首次点击不触发筛选、第二次才生效的问题排查

问题原因 #

你遇到的点击两次才生效的问题本质是React函数组件中useState的更新是异步的：
你在handleSubmit中执行setFilters(values)之后，React不会立刻更新filters状态值，紧接着调用的fetchData(page)读取到的还是上一次的旧筛选条件，所以第一次提交的请求参数不对；等第二次点击提交时，filters已经完成了第一次提交时的状态更新，才会用正确的参数发起请求。

修复方案 #

方案1：直接传递表单值（最简洁） #

不用等filters状态更新，直接把提交拿到的表单values传给fetchData使用即可，修改代码如下：

// 给fetchData新增可选的筛选参数，默认用filters状态
const fetchData = async(page: any, customFilters = filters) =>{
    const { certificateNo, protoColNo, requestStatus, researchTitle, sponser, country, noOfSubjects, startDate, endDate} = customFilters;
    // 后续参数拼接、请求逻辑保持不变
}

// 提交时直接传入当前表单的值
const handleSubmit = async (values:any)=>{
    console.log("Inside the handle Submit");
    setFilters(values);
    fetchData(page, values);
}

方案2：把filters加入useEffect依赖（更符合声明式开发规范） #

修改现有useEffect的依赖数组，加入filters，只要page或者filters变化就自动触发请求，提交时不需要手动调用fetchData：

// 新增filters作为依赖项
useEffect(() => {
    fetchData(page)
}, [page, filters]);

// 提交时只更新filters状态即可
const handleSubmit = async (values:any)=>{
    console.log("Inside the handle Submit");
    setFilters(values);
}

以上两种方案都可以解决点击两次才生效的问题，可根据业务开发习惯选择。

内容的提问来源于stack exchange，提问作者Shruti sharma