0
Help us understand the problem. What are the problem?

posted at

updated at

setStateの2つの定義の仕方

個別でstateを定義する

メリット
個々の値を扱いやすい。

デメリット
人によっては若干読みづらい?

const [todo, setTodo] = useState('');
const [date, setDate] = useState('');

まとめてstateを定義する

メリット
オブジェクトとして管理するから構造があってわかりやすい

デメリット
誤って、他の値を初期化してしまう可能性がある。

const [userInput, setUserInput] = useState({
  todo: '',
  date: ''
});

まとめて定義するときの注意点

1つの値だけ変えたい時には注意が必要。例えば、userInput.todoだけを変えたい時に、以下のようにしてしまうと、userInput.dateの値が消えてしまい、アクセスできなくなる。

setUserInput({
  todo: 'Updated!'
});

対処法①
以下のように、毎回スプレッド構文で全ての要素を戻してから、変えたい要素だけオーバーライドする。

setUserInput({
  ...userInput,
  todo: 'Updated!'
});

対処法②
useStateには関数を渡すことができて、引数はpreveStateになり戻り値は①と同じでオブジェクト。

①だと、他のsetState処理との順番がユーザーのinput処理の順番通りとは限らないが、こちらの方法を使えば、常に最新のデータにアクセスできるらしい。よって、こちらの方が安全とされている。

setUserinput((prevState) => {
  return {
    ...prevState,
    enteredTitle: event.tartget.value
  };
});
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?