【React】親コンポーネントのstateを変更できない

Question

reactで親コンポーネントのstateを子のコンポーネントから変更しようとしていますが、それができません。

コード

実現したいこととしては、子のコンポーネントから親コンポーネントのstateを更新したいと言うことなのですが、具体的なコードは以下の通りです。
※少し省略してます

const Parent: React.FC = () => {
  const [currentId, setCurrentId] = useState(data.length - 1)

  const handleSwipe = () => {
    setCurrentId(currentId - 1)
  }
  
  return(
    <>
      <Child handleSwipe={handleSwipe}>
    </>
  )
}

const Child: React.FC<Props> = (props) => {
  return(
    <>
      <div onSwipe={() => props.handleSwipe()}>
        <div>
             <img src={user.img} alt="" />
             <div className="person-info">
                <strong>{user.name}</strong>, {user.age}
             </div>
          </div>
      </div>
    </>
  )
}

ParentのcurrentIdというstateをChildコンポーネントがスワイプされたら、handleSwipe関数を実行して、setCurrentId(currentId - 1)をしたいのですが、うまく更新できません。スワイプのたびにconsole.log(currentId)でコンソールにcurrentIdを表示することはできているので、スワイプ自体は検知され、handleSwipeも実行されているように見えるのですが、表示されているcurrentId自体はずっと同じものが表示されています。

これにはどのような原因があるのでしょうか？また、どのようにしたらstateを更新できますか？

Answer 1

  const handleSwipe = () => {
    setCurrentId(currentId - 1)
  }

このような、「現在の値を使った更新」を行う場合、関数を渡してsetCurrentId(currentId => currentId - 1)のようにするのが適切です。

Comments

[kobaryo04ysh]

できました！ありがとうございます！！