Zenn
🍼

React UseStateのリスト追加でハマった

2023/07/19に公開
2件
React
駆け出しエンジニア
tech

そもそもUseStateって何

関数コンポーネントでstateを管理するためのReactのフック(Hooks)
Stateは本来クラスコンポーネントで管理されていた。

Hooks(フック)とは

クラスを使うことなく、stateを扱ったり、ライフサイクルに応じた処理を実装する機能

##今回ハマった内容
Reactでリストの値が追加できなかった

const [messages, setMessages] = useState([])

const addMessage = () => {
    setMessages([...messages, text:'hello' , sender:'user'])
}

だと、リストに値が追加されずに上書きされてしまっていたため
preveを使い前の状態のまま値を追加する

setMessages((prevMessages) => ([...prevMessages, { text: inputValue, sender: 'user' }]));

Discussion

Honey32Honey32

失礼します。

(prev) => [...prev, { key: "value" }]

[...messages, { key: "value" }]

どちらでも動くので、どちらでも良いです。前者でないと間違いという訳ではありません。

記事に記載されているコードをそのまま信じると、単純に JS のオブジェクトの構文が誤っているからではありませんか？

  const [messages, setMessages] = useState([])

  const addMessage = () => {
-      setMessages([...messages, 'text':'hello' , 'sender':'user'])
+      setMessages([...messages, { text: 'hello', sender: 'user' }])
  }
ポポ

すみません、記述ミスでした。
実行環境では、しっかりとこちらになっていました。
コメント頂きありがとうございます。

 setMessages([...messages, { text: 'hello', sender: 'user' }])
 }