問題一覧に戻る
初級状態管理
問題27: 前のstateに基づく更新

関数形式のsetStateを使って、確実な状態更新を行います。複数の更新を連続して行う場合に必要なパターンです。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const add3Times = () => {
    // 間違った方法（値が1しか増えない）
    // setCount(count + 1);
    // setCount(count + 1);
    // setCount(count + 1);

    // 正しい方法（値が3増える）
    setCount( =>  + 1);
    setCount( =>  + 1);
    setCount( =>  + 1);
  };

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={add3Times}>+3</button>
    </div>
  );
}

export default Counter;
···