【TypeScript】ReactHooksのuseStateでオブジェクト配列に値をセットする方法ご紹介。

TypeScript

2022.04.03

今回の記事はTypeScriptベースのReactでuseStateにオブジェクト配列の値をセットする方法をご紹介する記事です。困っている方は是非参考にして見てください。

Reactプロジェクト環境構築
useStateにオブジェクト配列を定義
useStateのオブジェクト配列に値をセットする方法

Reactプロジェクト環境構築

まずは基礎となる「React」と「TypeScript」のプロジェクトを作成しましょう。

npx create-react-app sample001 --template typescript

これでプロジェクトが作成されます。私はVSCodeで行っておりますので下記のようになっております。

これでプロジェクト作成完了です。ターミナルを開き作成されたプロジェクトに入り、ローカルサーバーを立ててみましょう。

cd sample001
npm start

これで下記をブラウザで表示するとReactページを表示することができます。

http://localhost:3000

useStateにオブジェクト配列を定義

useStateにオブジェクト配列を定義するには下記のように定義を行います。

// オブジェクト型
type TestType = {
 'obj1':string,
 'obj2':number
}

// オブジェクト配列UseState
const [objs,setObjs] = useState<TestType[]>([]);

では実際に「App.tsx」にコードを書いて動かして見ましょう。

useStateのオブジェクト配列に値をセットする方法

import React, { useState } from 'react';
import './App.css';

// リストに入れる数字
var addNum = 0;

// オブジェクト型
type TestType = {
 'obj1':string,
 'obj2':number
}

function App() {
  // オブジェクト配列UseState
  const [objs,setObjs] = useState<TestType[]>([]);
  
  // クリックアクション
  const onSetValue = () => {
    addNum++
    const addParam:TestType = {
      obj1:`値${addNum}`,
      obj2:addNum
    }
    // オブジェクト配列へ値セット部分
    setObjs([...objs, addParam]);
    // コンソール出力部分
    console.log(objs)
  }

  useEffect(()=>{

  },[])

  return (
    <div className="App" >
      <button onClick={() => onSetValue()}>ボタン</button>
    </div>
  );
}

export default App;

これで下記のようにボタンを押すと押しただけ配列内にオブジェクトを追加できています。