Reactにおいて連想配列が空認定されるバグの治し方

Question

現在React.jsで開発をしてるのですが連想配列が空認定されるバグを解決することが出来なかったため質問させていただきました。
コードは以下の通りです。

 const [historyDiaries, setHistoryDiaries] = useState([])
  let historyDiariesArray = []
  console.log(2222222)
  console.log(historyDiaries)
  console.log(2222222)
  useEffect(() => {
    data.map(async (res) => {
      registerRef(userKey)
        .doc(res.diaryId)
        .onSnapshot((diary) => {
          historyDiariesArray.push({
            diaryData: diary.data(),
            updatedDay: res.updateAt,
            id: res.diaryId,
          })
        })
    })
    setHistoryDiaries(historyDiariesArray)
  }, [])

firestoreのdetaをhistoryDiariesArrayという配列に一つずつpushして最終的にはmapで展開したいと考えております。
しかし、consoleの中身が空認定されてしまい、mapすることができません。
解決法はありますでしょうか？

Comments

[maisumakun]

dataの定義はどこでしょうか？

[kAAAAA]

dataはpropsで渡しているのですが、中身は連想配列の[{diaryid:3131313,updateAt:2121212},{diaryid:3131313,updateAt:2121212}]
のような形となっております。

Answer 1

関数コンポーネントは、描画のたびに再実行されます。そして、setStateは再描画を実行します。

そのため、let historyDiariesArray = []はsetStateのたびに再実行されて、値が蓄積されることはないのです。

Comments

[maisumakun]

関数コンポーネントでは、stateやrefを使わなければ、再描画を越えて値を保持することはできません。