HOOKSのuseState同期更新効果を達成するために

最近は、フックの使い方を自分で勉強する企画を追いかけながら、古い企画を新しい書き方に変えたり、ちょこちょこ勉強中です。

そこで問題となるのが、フックを使用する過程で、状態データを変更した後にインターフェイスAPIをリクエストするロジックを実行したい場合です。

以下：

const [filterParams, setFilterParams] = useState({ cate1Id: 101, pageNum: 1, pageSize: 10 })
// 子コンポーネントが親コンポーネントのメソッドを実行し、パラメータを返すとき、状態が更新された後にAPIを呼び出したい。
const onFetch = (params) => {
 setFilterParams(params)
 fetchList(params)
}
const fetchItemCodeList = (async (params) => { 
 setTableLoading(true) 
 const res = await fetchListApi({ ...filterParams, ...params }) 
 setTableLoading(false)
})

しかし、setFilterParamsは非同期であるため、インターフェイスを要求する際に間違ったパラメータが返されるため、実際には機能しません。

また、クラスが宣言されたときに、this.setState() を実行する前にコールバックを実行して状態を更新させることができます。this.setState()を実行するのと同じですが、コールバック関数に引数を与えません。

どうすればいいのでしょうか？

実際には、この問題を解決するためにuseEffectを使用することができます、メソッドはuseEffectの依存関係を使用することです、状態が更新された後、変更の依存関係に耳を傾け、自動的にuseEffectの関連するロジックを実行します。

useEffect(() => {
 fetchItemCodeList()
}, [filterParams])
// 子コンポーネントが親コンポーネントのメソッドを実行し、パラメータを返すとき、状態が更新された後にAPIを呼び出したい。
const onFetch = (params) => {
 setFilterParams(params)
 // fetchList(params)
}