Open4
React × TypeScript メモ
ゆゆゆtype
axiosでとってきたデータに型指定する。
typeは；（セミコロン）で1つずつ区切る！
type TodoType = {
"userId": number;
"id": number;
"title": string;
"completed": boolean;
}
取得データに型指定
.getのあと、<>で指定
取得データが配列になってたら<Array<>>で指定する
axios
.get<TodoType>("https://jsonplaceholder.typicode.com/todos")
.then((res) => {
setTodos(res.data);
useStateに型指定
useStateのあと、<>で指定。
想定してないuseStateの更新を防ぐ。
const [todos, setTodos] = useState<Array<TodoType>>([""]);
まとめ・取得したデータの表示
jsonplaceholderでデータの取得、表示
function App() {
// useStateで配列（TodoType）を指定
const [todos, setTodos] = useState<Array<TodoType>>([]);
// ボタンがクリックされたらデータを取得する
const onClickFetchData = () => {
axios
// 取得するデータの型は<Array<TodoType>>
.get<Array<TodoType>>("https://jsonplaceholder.typicode.com/todos")
// データをとってきたら行う処理
.then((res) => {
// resのなかのdataが必要なデータ、setTodosで更新
setTodos(res.data);
})
}
return (
<div className="App">
{/* ボタンにクリックイベント */}
<button onClick={onClickFetchData}>データ取得</button>
{/* todoにtodosを格納する */}
{todos.map((todo) =>(
// titleとidを取得する。${}で変数の指定
<p>{ `${todo.title}(ユーザー：${todo.id})`}</p>
))}
</div>
);
}
{/* JavaScript でリストを変換する方法 */}
{/* const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled); */}
map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。