useEffect中如何主动调用接口？

Question

const [searchValue, setSearchValue] = useState({name:'', pageNo:1});

const getList = ()=>{
    // 调用接口
}

useEffect(()=>{
    getList();
}, [searchValue.name, searchValue.pageNo]);

比如上面的代码，一个列表，根据abc三个参数去查询接口，如果name或者pageNo变了都会去调用接口，这个是没问题的。

但是如果用户主动点击了查询按钮，这个时候需要我们主动去调用接口

const handleClickRefresh = ()=>{
    getList();
}

这个时候一般需要把pageNo设置为1

const handleClickRefresh = ()=>{
    setSearchValue({...searchValue, pageNo:1})
    getList();
}

这时，如果pageNo不是1，设置pageNo为1会触发getList，第二行又主动调了getList，会导致调用两次。

我们只能写成这样

const handleClickRefresh = ()=>{
    if(searchValue.pageNo === 1){
        getList();
    }else{
        setSearchValue({...searchValue, pageNo:1})
    }
}

虽然逻辑上没问题，但是感觉很啰嗦，比较复杂，请问这样的业务场景中，代码有没有优化的地方？

Answer 1

其实你这是一个通用的应用场景，可以考虑封装一个自定义hooks来实现，正好ahooks实现了这个功能，useRequest，哪怕你不用这个库，你也可以看看它是怎么实现的，还是值得学习一下的