React async awaitの返り値がを解決したいです

Question

やりたい事

listsに、asyncを利用したメソッド（getData）で取得したデータ（配列を）を変数（lists）に格納したいです。
※こちらはやりたい事を検証する為のサンプルです

サンプルソース

listsには、Promise {<pending>}が入ってしまいます。
async awaitがうまく理解できておらず、どなたかお分かりになりませか？

async function request(){
  const res = await fetch('https://reactnative.dev/movies.json', {
    method: 'GET'
  })
  const data = await res.json()
  return data
}

const getData = async () => {
  const res = await request()
  debugger  
  return res.movies
}

const lists = getData() ## ここです
debugger
const  App = () => {
  debugger
  return (
    <div className="App">
      {lists.map((list) => <li>{list.title}</li>)}   
    </div>
  );
}

export default App;

debugggerで止めた場合のresの中身です

res.moviesで配列のデータが取得できます

Answer 1

Promiseは処理が成功し完了した状態、または失敗した状態になるまでは、pendingの状態になります。
そして、Reactでは、レンダー可能になる前のコンポーネントは、何かを「待機」できないようです。

つまり、Promiseがfullfilled（処理が成功し完了した状態）になるまで、Reactのレンダーは待ってくれないらしく、レンダー時にPromise {<pending>}が入るのだと思います。

関数コンポーネント（App）内で、
ステートフックと副作用フックを実行するようにしてみてください。

const  App = () => {
  debugger
  // ステートフック
  const [lists, setLists] = useState([]);

  // 副作用ステートフック
  useEffect(()=>{
　const lists = await getData();
  setLists(lists);
 },[]) // レンダー直後に実行される。又、実行は初回レンダーだけ。

  return (
    <div className="App">
      {lists.map((list) => <li>{list.title}</li>)}   
    </div>
  );
}

フックの詳細については、公式のドキュメントが準備されています。
https://ja.reactjs.org/docs/hooks-intro.html

Comments

[Awtanabe]

ご回答ありがとうございます！

```

async function request(){
const res = await fetch('https://reactnative.dev/movies.json', {
method: 'GET'
})
const data = await res.json()
return data
}

const getData = async () => {
const res = await request()
return res.movies
}

const App = () => {
// ステートフック
const [lists, setLists] = useState([]);

// 副作用ステートフック
useEffect(()=>{
　const lists = await getData();
setLists(lists);
},[]) // レンダー直後に実行される。又、実行は初回レンダーだけ。

return (
<div className="App">
{lists.map((list) => <li>{list.title}</li>)}
</div>
);
}
export default App;

```

試しに上記を実行して見たところ、async関数の外では実行できないよと言われてしまいました。

[yuxki]

申し訳ございません。回答の編集過程で、awaitを削除するのを忘れていました。
awaitを削除してみてください。

const lists = getData();

[Awtanabe]

ご回答ありがとうございます！

awaitを外したら再度 Promise <Pending>になってしました。。

[yuxki]

下記に書き変えてみてください。
当該処理を無名関数で実行するようにしました。

useEffect(() => {
(async function() {
const lists = await getData();
setLists(lists);
})();
}, [])

async関数は戻り値をresolveする関数でもあり、promiseチェーンによる記法か、async関数によるawaitでasync関数のresolveを待つ必要がありました。
今回のように、通常の関数の中で戻り値を変数に代入しようとすると、async関数のresolveを待たずに代入するため、Promise <Pending>になってしまい、同時にPromiseクラスが返ってしまうことになるみたいです。

[yuxki]

正常に動かなかったコードのイメージとしては、下記のような動きになります。
ソースコードにコメントしましたので、参考にしてみてください。
```
async function request(){
const res = await fetch('https://reactnative.dev/movies.json&#039;, {
method: 'GET'
})
const data = await res.json() // res.json()のresolveを待ってから、dataに代入
return data // dataを戻り値にresolveする
}

const getData = async () => {
const res = await request() // request()のresolveを待ってから、resに代入
return res.movies // res.moviesを戻り値にresolveする
}

const App = () => {
// ステートフック
const [lists, setLists] = useState([]);

// 副作用ステートフック
useEffect(()=>{
　const lists = getData(); // getData()のresolveを待たずに、Promise <Pending>がdataに代入
setLists(lists);
},[]) // レンダー直後に実行される。又、実行は初回レンダーだけ。

return (
<div className="App">
{lists.map((list) => <li>{list.title}</li>)}
</div>
);
}
export default App;
```
Promise と async/await については、色々記事があるので参考にしてみてください。

Promiseについて0から勉強してみた
https://qiita.com/toshihirock/items/e49b66f8685a8510bd76

async/await 入門（JavaScript）
https://qiita.com/soarflat/items/1a9613e023200bbebcb3