React hooks中怎么等待多个useState状态改变后，再执行某个函数

Question

场景：比如移动端上的一个页面，上面是一个搜索框，下面是一个结果列表。列表底部根据是否加载到最后一页，显示不同的文案。

代码：

/** 搜索框值 */
const [searchVal, setSearchVal] = useState("");
/** 是否最后一页 */
const [last, setLast] = useState(false);
/** 页码 */
const query = useRef({ page: 0, size: 20 });

// 先重置再请求接口
useEffect(() => {
  // last重置后，列表view底部文案会随之切换
  setLast(false);
  useRef.current.page = 0;
  getData();
}, [searchVal]);

const getData = async () => {
  if (last) {
      return;
  }
  const params = {
    searchVal
  };
  const data = await getDataByAjax(params, query);
  /* 省略列表赋值相关逻辑 */
  if (data.last) {
      setLast(true)
  }
}

这样写其实有问题的，因为setLast是异步更新的，执行getData的时候，last还是true。

所已当遇到这种需求时，现在虽然只是等待一个useState和一个useRef更新完成后再请求接口，如果有多个useState和useRef需要重置后再请求接口，该怎么解决呢？其实就是有没有类似Promise.all()那种方案，不管前置需要几个异步操作，等待所有的异步操作完成后再执行某个操作。

大佬们求教

Answer 1

你要实在想用hooks，根据last的状态，加个useEffect不就行了

useEffect(() => {
    if (!last) {
        getData();
    }
}, [last])

更新答案：
你说的等待多个state变量都更改完成才执行，具体要看你的业务逻辑和变量是什么。
举个例子，如果你的业务变量都是Boolean类型，那么这种方式也可行

useEffect(() => {
    if (!last && isReady) {
        getData();
    }
}, [last, isReady])

如果你的业务变量是多种类型，并且业务逻辑也比较复杂，但是要等他们都更新了才执行，建议使用ref而非state。因为ref是及时更新的，无论你在哪里修改，都能及时获取到最新值。
这些方法都是为业务服务的，不是一定就要用某种更别扭的方式去做。