Reactで開発を進めている際によく使用するuseState。このuseStateで複数の値を管理する方法をまとめておく。
目次
useStateで複数の値を管理する
const [user, setUser] = useState({
name: "",
age: "",
gender: "",
});
例えば、こんな感じでuserオブジェクトの値を管理したいとしよう。
useStateで値を複数管理したい場合のset関数
以下のコード例では、handleNameという関数を使用しているが、実際に使用するテンプレート部分のコードは割愛する。
だめなコード例
const handleName = (e) => {
setUser({ name: e.target.value })
};
このコードだと、値の状態を操作することはできるが、userオブジェクトの値のnameというような感じではなく、独立したnameの値に対するものという意味になってしまう。
良いコード例
const handleName = (e) => {
setUser((prev) => {
return {
...prev,
name: e.target.value,
};
});
};
上記と似ている部分はあるが、set関数の中身をさらに関数にして、スプレッド構文なるものを使用する。そして、このsetUserの引数としてすでに存在しているuserオブジェクトの中身を受け取れるようにする。このようにすれば、すでに存在しているuserの各要素の値を保持しながら、ここのコードのnameを管理することができる。
スプレッド構文
スプレッド構文はこちらに詳しく書いてある