misoniction.com

forやwhileなどのloopのなかでuseStateに値を入れる

tags

試した環境

  • react : 17.0.2

実現したかっと事と、実際に起きたこと

while文の中でstateに値を追加したかった。

import React, { useState } from 'react'

export const SampleComponent: React.FC = () => {
  const [value, setValue] = useState<string[]>([])
  
  const updateValue = () => {
    for (let i = 0; i <= 100; i++) {
      setValue([...value, i])  // valueは[100]しか入っていない
    }
  }
}

valueの値は100しか入っていない。
[0, 1, 2, .... 100]になるのが理想。

解決方法

setValueuseEffectが完了してからstateを書き換えるので、ループ内では常にvalue[]のままである。 ので、setValueを書き換える。

const upDateValue = () => {
  for (let i = 0; i <= 100; i++) {
    setValue((prevArray) => [...prevArray, value])
  }
}

上記のような関数を渡してやると、0~100の値がstateに保存されるようになる。