Reactでstateの配列にオブジェクトを入れる入れ方がわかりません

Question

前提・実現したいこと

firestoreから受け取ったオブジェクトをstateの配列に入れたいのですが、やり方がわかりません

該当のソースコード

import {db} from '../firebase'
import {useHistory} from 'react-router-dom'

const Chart:React.FC = () => {
  const [chartData,setChartData]=useState([{}])
  const history=useHistory();
  const handleClick=()=>{
    history.push("/post")
  }
  
  useEffect(()=>{
    const docRef=db.collection("posts").get().then((docs)=>{
      docs.forEach((doc)=>{
        if (doc.exists) {
          setChartData([...chartData,{
              expense:doc.data().expenses,
            }]);
            console.log(doc.data())
            console.log(chartData)
          } else {
            alert("メンバーが見つかりませんでした。");
          }})
        })
        return 
  },[])
  
  return (
    <div className="container">
      <button onClick={handleClick}>値を入力する</button>
    </div>
  )
}

export default Chart
コード

###出力結果

Answer 1

まず、動作確認の方法について確認させてください。
setChartData() したあとに console.log(chartData) の結果が出力されていないので、state保存されていないと思われているという認識で良いでしょうか？

useState で生成されるセッターですが、こちらは同期的にstate保存するものではありません。
そのため、setXxx直後にログ出力しても期待した値が出力されないことがあります。

setXxx するとコンポーネントを再描画するため、そのタイミングで chartData の値を確認して見てください。

例としては、

useEffect(() => console.log(chartData))

でコンポーネント再描画されると動作するコードないでログ出力

もしくは、描画内容として chartData ないの値を画面表示してみてください。

firestore からのレスポンスがあるので単にReactのライフサイクルにしたがって処理できていないだけと思われます。

Comments

[daaaiki]

なるほど！setChartですぐにsateが描き変わるものだと思っていました。ありがとうございます！！

[takapiroid]

解決できたようで何よりです！
私もReact始めたての時に同じようにsetXxx直後に、stateを用いて処理を書いて動かない体験をしましたので（汗

[daaaiki]

戸惑っていたのでとても助かりました！ありがとうございます！