🐣
[React] Stateを更新するときのメモ
作成日:
2021/12/14
2
非同期
setStateは非同期で行われる可能性がある。
更新された値を確実に読み取り、その値に基づいて処理をしたいときはコールバック関数を使う。
例えば下記 count を更新する setCount は
setCount(count + 1) じゃなくて
setCount(oldValue => oldValue + 1) とする方が確実&安全。
export default function App() {
const [count, setCount] = useState(0)
function add() {
setCount(oldValue => oldValue + 1)
}
function subtract() {
setCount(oldValue => oldValue - 1)
}
return (
<div className="counter">
<button className="counter--minus" onClick={subtract}>–</button>
<div className="counter--count">
<h1>{count}</h1>
</div>
<button className="counter--plus" onClick={add}>+</button>
</div>
)
}
オブジェクトのstate
クラスコンポーネントの setState メソッドはstateの更新時にマージをする。
Hooksの useState は自動的なマージをしないので注意。
下記のように書くとisFavorite以外の値が消えてしまう。
const [contact, setContact] = React.useState({
name: "apple",
color: "red",
isFavorite: true
})
function toggleFavorite() {
setContact(prevContact => {
return {
isFavorite: !prevContact.isFavorite
}
})
}
これはスプレッド構文を使って回避。
function toggleFavorite() {
setContact(prevContact => {
return {
...prevContact,
isFavorite: !prevContact.isFavorite
}
})
}
useReducer を使う方法も。
これはもう少し後に詳しく調べる。
https://ja.reactjs.org/docs/hooks-reference.html#usestate
https://scrimba.com/learn/learnreact/complex-state-updating-state-objects-cJLgWJSN
制作会社でフロントのコーディングやWordpressのテーマ開発をしてます。
本命はJavascriptです😋
目指せフロントエンドエンジニア👊