React hooks中useEffect修改多个状态后调用函数，怎么保持同步？

Question

用一个简单的代码来描述我的需求：
有一个状态A，它发生改变时，状态B和C都需要跟着重置，然后再去调用数据。
再class中，使用：

{
  await setState({ a = val });
  await setState({ b = 0, c = 0 });
  getData();
}

即可，但使用hooks在await一个set操作时，发现没有效果。

const [a, setA] = useState(0);
const [b, setB] = useState(1);
const [c, setC] = useState(2);

useEffect(() => {
  /* 省略代码 */
  (async () => {
    await setB(0);
    await setC(0);
    getData();
  })();
}, [a]);

const getData = async () => {
  const params = {
    b,
    c,
  };
  const data = await getDataByAjax(params);
  console.log(data);
}

代码中修改a后，触发useEffect，修改b和c的值，然后才调用getData；
而实际上并不是同步的，getData中b和c的值没有被同步。

Answer 1

推荐你看看我写的文章，

https://www.jianshu.com/p/0f8...

你刚好就遇到了这个问题。解决办法很多，推荐其中一种

const [a, setA] = useState(0);
const [params, seParams] = useState(1);

useEffect(() => {
  // 通过a值的变化计算出来b，c的变化
  setParams({ b: xxx, c: yyy })
}, [a]);

useEffect(() => {
  getDataByAjax(params);
}, [params]);

具体如何要结合你的实际情况而定