配列型のuseStateの更新方法について

Question

困っていること

オブジェクト型配列のuseStateを更新することはできるのですが、空にする方法が分からないです。

type Gafa = {
  name: string
  id: string
}[]
const [gafa, setGafa] = useState<Gafa>([]);
const newData: Sample = [
  { name: 'google', id: 'goog' },
  { name: 'aple', id: 'aple' },
  { name: 'facebook', id: 'fb' },
  { name: 'amazon', id: 'amzn' },
];
const onClick = () => {
  if(!gafa.length){
  newData.map(e => {
   gafa.push(e)
  })
  setGafa(gafa)
  } else {
   setGafa([]) // 更新が反映されない
   // gafa = [] としようとしたが定数なので代入できないです...
   console.log(gafa)
  }
  console.log(gafa)
}

Comments

[maisumakun]

「更新が反映されない」というのは、どのような方法で確認しましたか？

[nanase21]

質問に追記させて頂きました。
else{}の中にconsole.logを入れて確認した時にsetGafa([])としても更新されていませんでした。

[maisumakun]

stateの設定は非同期ですので、イベントハンドラ内でのconsole.log(gafa)は空になりません。

[hoshi-takanori]

むしろ、gafa.push(e) なんてやっちゃいけません。

Answer 1

useStateで宣言したstateを更新するためには必ずsetStateを使用してください
stateを直接書き換えるのは使い方が間違っています

今回の場合は次のようにできるすれば良いと思います

const onClick = () => {
  if(!gafa.length){
    setGafa((prev) => [...prev, ...newData])
  } else {
   setGafa([])
  }
}

console.log(gafa)

また、setStateは非同期で行われるため直後にconsole.logしても反映されていない可能性が高いです
上記のように再レンダリングのタイミングでconsole.logすれば更新が確認できると思います

Comments

[nanase21]

ご教示頂きありがとうございます。
useStateについてちゃんと理解してなかったのでとても勉強になりました。