reactでリロードした時、画面に正しい件数を表示したい。

Question

reactでaxiosを使いデータを取得し、そのデータをfilterにかけ、結果の件数を表示しています。

import React, { useEffect, useState } from 'react'

export default function getData() {
  const [datas, setDatas] = useState()
  
  useEffect(() => {
    axios.get('/***').then(data => setDatas(data))
  }, [])

  const filteredDatas = datas.filter(row => row.data < 1)

  return(
    <div>
      {`データの件数は${filterdDatas.length}件です`}
    </div>
  )
}

このようにすると初めはデータが入らず画面に"データの件数は0件です"と一瞬出力され、その後正しい件数が表示されます。
この最初のデータの件数は0件ですというのを表示させず、初めから正しい値を表示するにはどのようにしたらよろしいでしょうか？
よろしくお願いいたします。

Comments

[hoshi-takanori]

axios.get は非同期なので、最初はデータが存在しません。datas が undefined なら何も表示しなければいいのでは。

[hello_space]

ありがとうございます！おっしゃっていただいた方法での実装を考えます。

Answer 1

初めから正しい値を表示するにはどのようにしたらよろしいでしょうか？

無理です。axiosによるデータ取得は非同期的ですので、コンポーネントの表示から値が取れるまでにはどうしても時間が発生します。

（なお、「ロード中…」のような表示で場をつなぐ、あるいはデータが取れるまでは非表示にしておく、という選択肢はあります）

Comments

[hello_space]

ありがとうございます。できないことがわかり、すっきりしました。