react TypeScript 関数Aの結果をもとに関数Bを実行する方法

Question

実現したいこと

①検索処理Aを実行しリストAを取得
②リストAを引数に検索処理Bを実行しリストBを取得
ということをしたいです。

発生している問題・分からないこと

②の時点でリストAが空になっているため以降の処理が上手くいきません。
リストAを取得してから検索処理Bを実行するにはどうすればよいでしょうか？

該当のソースコード

import { useSearchA } from "./hooks/useSearchA";
import { useSearchB } from "./hooks/useSearchB";

export const Main = (): JSX.Element => {
const { listA, searchA } = useSearchA();

const { listB, searchB } = useSearchB();

const onSearchA = () => {
  searchA().then;
};

const onSearchB = () => {
  searchB(listA).then; // listAが空
};

return (
  <>
    <button onClick={() => {
            onSearchA();
            onSearchB();
        }}
    />
  </>
);
};

type UseSearchAType = {
  listA: [];
  searchA: () => Promise<void>;
};

export const useSearchA = (): UseSearchAType => {
  const [ listA, setListA ] = useState<[]>([]);

  const search = useCallback(
    async () => {
      const result = バックエンドAPIを実行
      setListA(result);
    }, []
  );

  return {
    listA,
    search,
  };
};

type UseSearchBType = {
  listB: [];
  searchB: (conditionB: []| undefined) => Promise<void>;
};

export const useSearchB = (): UseSearchBType => {
  const [ listB, setListB ] = useState<[]>([]);

  const search = useCallback(
    async (conditionB | undefined) => {
      const result = バックエンドAPIを実行
      setListB(result);
    }, []
  );

  return {
    listB,
    search,
  };
};

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

メイン処理の

const onSearchB = () => {
  searchB(listA).then(); // listAが空
};

を

useEffect(() => {
  searchB(listA).then();
}, [listA]);

と変えたりしましたが上手くいきませんでした。

補足

特になし

Comments

[maisumakun]

.then;となっていますが、この部分は何を意図したものでしょうか？

（thenメソッドを参照するだけでは、期待される動作はありません）

[asdkfj]

すみません、then;ではなくthen();にしているため修正しました。
searchA,searchBがPromiseのため必要かと思いつけていましたがこれも特に意味ないのでしょうか。。

[maisumakun]

> then;ではなくthen();にしているため修正しました。
searchA,searchBがPromiseのため必要かと思いつけていましたがこれも特に意味ないのでしょうか。。

はい。thenは引数として渡した関数をPromise解決時に実行するメソッドなので、then(空カッコ);でも無意味です。

[asdkfj]

ありがとうございます。

[maisumakun]

useEffectでlistAを拾う形にした場合、どのような挙動を示したのですか？

（「動かない」だけではなく、コンソールにエラーが出ていないかなど詳細も確認してください）

Answer 1

細かなところは分かりませんが、すくなくとも、 State as Snapshot（状態のスナップショット） に引っかかっているかと思われます。

こちらの記事で解説しています。

https://qiita.com/honey32/items/ee8d1577e68b0d58678d

極めて簡易的な例ですが、以下のように、「seatchA 関数が、返り値として取得結果を返すようにして、それを searchB の引数に渡す」といった形で実装するのが、解決方法の一つになります。

<button 
  onClick={() => {
    searchA().then((data) => searchB(data))
  }}
/>

Answer 2

誤回答です

そもそも、待つべき部分はuseSearchA()、useSearchB()

const { listA, searchA } = await useSearchA();
const { listB, searchB } = await useSearchB();

Comments

[maisumakun]

useSearchA()やuseSearchB()はふつうの値を返すので、そこにawaitを書いても無意味です。

……というより、関数コンポーネント全体をasyncにはできない以上、そこにawaitを書くようなパターンは発生しません。

[FoxRefire]

質問者提示のソースコードの2つ目及び3つ目を見ると、非同期関数でこれがuseSearchA、Bのコードだと認識ですが違うのですか？
普段Javascriptのみ書いててTypescriptは書かないので...

こういう話ではないということですか？
```
async function hoge(){
return {foo:1, bar:2};
}

let {foo} = await hoge()
console.log(foo) //1

let {bar} = hoge()
console.log(bar) //undefined
```

[maisumakun]

> 質問者提示のソースコードの2つ目及び3つ目を見ると、非同期関数でこれがuseSearchA、Bのコードだと認識ですが違うのですか？

非同期関数だと認識できません。useSearchAやuseSearchB自体に、asyncは付与されていませんし、Promiseも返しません。