setStateをuseStateに書き直したい

前提・実現したいこと

以下のようなsetStateをuseStateに書き直したいと思っています。
自分なりに書き直してみたのですが、何か特にエラーが出ることはないのですが挙動がおかしいです。
通常はsetState({})だと思いますが、setState({},resolve)となっているところが少し気になります。
わかる方がいましたら、コメントお願いします。

発生している問題・エラーメッセージ

該当のソースコード

const [sortingItemKey, setSortingItemKey] = React.useState(null);
const [isSorting, setIsSorting] = React.useState(false);

//省略

return new Promise((resolve) =>
      this.setState(
        ({items}) => ({
          sortingItemKey: items[index],
          isSorting: true,
        }),
        resolve,
      ),
    );

↓自分が書き直したもの

  return new Promise((resolve) => {
      setSortingItemKey(items[index]);
      setIsSorting(true);
      resolve();
    });

##試したこと
コールバック関数がコンソールログ等の場合はそのまま書けば良いと思うのですが、resolveの場合はどのようにすれば良いのでしょうか。
https://www.aizulab.com/blog/react-usestate-callback/

javascript
1useEffect(() => {
2      //??
3    }, [sortingItemKey, isSorting]);
4
5    return new Promise((resolve) => {
6      setSortingItemKey(items[index]);
7      setIsSorting(true);
8    });

hentaiman

2020/11/20 01:55

放置されている多数の過去質問の事を考慮した結果、あなたの質問はほぼ全て丸投げと判断しました。

maisumakun

2020/11/20 02:16

「return new Promise」となっていますが、このPromiseは何が受け取ってどのように使われているのでしょうか？

aiai8976

2020/11/20 02:22

https://github.com/clauderic/react-sortable-hoc/blob/master/src/.stories/grouping-items/index.js このコードを参考にしているので、こちらをチェックしていただけると助かります。

行動規範の内容に同意します

回答1件

ベストアンサー

↓自分が書き直したもの

setStateの第二引数のコールバック関数はsetStateが完了した後に呼び出されるので、その書き方だと厳密には更新される前にresolveが呼び出されます。
実質componentDidUpdateと同じタイミングだと思うので、その場合はuserEffectを使ってstateの値の変化後を捕まえればよいかと思います。

投稿2020/11/20 01:55