useStateで管理している配列にsetStateで要素を追加していきたい。

Question

useStateで管理している配列にsetStateで要素を追加していきたい。

色々試しましたが、どうしても二回目以降setStateをすると上書きされてしまいます。(stateが[{}]の状態から、[{},{}]にしたいが、上書きされてまた[{}]の状態になる。)

どうすればstateの配列に要素を追加していけるでしょうか。

よろしくお願い致します。

    const [cards,setCards] = useState([])

    const generateCard = (e) => {
        const cX = e.offsetX
        const cY = e.offsetY
        const newPosition = {
            x:cX,
            y:cY
        }
        let newCards = [...cards,newPosition]
        
        console.log(newCards);
        setCards(newCards)
    }

Answer 1

このような、「もとの配列の値を使って新しい配列をsetStateしたい」というような場合、関数形式でsetStateを呼びましょう。

setCards(cards => [...cards, newPosition]);

Comments

[titizoukin]

無事解決しました。
本当にありがとうございました。