ユーザー情報が取得できない症状の解決方法について

# はじめに

Udemyハンズオン中にクリックしたユーザーの情報をコンソールで取得できない症状があり、こちらの解決方法について共有します。

# バージョン
React v19
<br>
下記のように記述していました。
```UserManegement.tsx
import React, { memo, useCallback, useEffect } from "react"
import { Center, Spinner, useDisclosure, Wrap, WrapItem } from "@chakra-ui/react"
import { UserCard } from "../organisms/user/UserCard"
import { useAllUsers } from "../hooks/useAllUsers";
import { UserDetailModal } from "../organisms/user/UserDetailModal";
import { useSelectUser } from "../hooks/useSelectUser";

export const UserManagement: React.FC = memo(() => {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const { getUsers, loading, users } = useAllUsers();
  const { onSelectUser, selectedUser } = useSelectUser();
  
  console.log("UserManagementでのusers:", users); // usersの中身をここでも確認 取得OK

  useEffect(() => getUsers(), [getUsers])

  const onClickUser = useCallback((id: number) => { 
    console.log("クリックされたユーザーID",id); // ここでid取得はできている
    onSelectUser({ id, users })
    onOpen()}, [])

  return (
    <>
      {loading ? (
        <Center h="100vh">
          <Spinner />
        </Center>
      ) : (
        <Wrap p={{ base: 4, md: 10 }}>
          {users.map((user) => (
            <WrapItem key={user.id} mx="auto">
              <UserCard id={user.id} imageUrl="https://picsum.photos/200" userName={user.username} fullName={user.name} onClick={onClickUser} />
            </WrapItem>
          ))}
        </Wrap >
      )}
      <UserDetailModal isOpen={isOpen} onClose={onClose} />
    </>
  )
})

```

```.useSelectUser.ts
import { useCallback, useEffect, useState } from 'react'
import { User } from '../../types/api/user';

type Props = {
  id: number;
  users: Array<User>;
}

export const useSelectUser = () => {
  const [selectedUser, setSelectedUser] = useState<User | null>(null); // 初期値は未選択のためnull

  const onSelectUser = useCallback((props: Props) => {
    const { id, users} = props;

     // usersが空でないかを確認する
    console.log("onSelectUser呼び出し時のusers", users); // usersの中身しても空


    const targetUser = users.find((user) => user.id === id) // usersという配列から、userという任意名の要素を1つずつ取出し、そのuser.idとPropsのidが＝のものを取得する


    console.log("idが一致したもの", targetUser); // undefinedが返る

    setSelectedUser(targetUser ?? null); // 上記で取得したユーザー情報をset関数へ渡す ?? 左辺がnullまたはundifinedの時に右辺を返す
  }, []);


  return { onSelectUser, selectedUser }
}

```

# 解決方法

```UserManegement.tsx
import React, { memo, useCallback, useEffect } from "react"
import { Center, Spinner, useDisclosure, Wrap, WrapItem } from "@chakra-ui/react"
import { UserCard } from "../organisms/user/UserCard"
import { useAllUsers } from "../hooks/useAllUsers";
import { UserDetailModal } from "../organisms/user/UserDetailModal";
import { useSelectUser } from "../hooks/useSelectUser";

export const UserManagement: React.FC = memo(() => {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const { getUsers, loading, users } = useAllUsers();
  const { onSelectUser, selectedUser } = useSelectUser();
  
  console.log("UserManagementでのusers:", users); // usersの中身をここでも確認 取得OK

  useEffect(() => getUsers(), [getUsers])

  const onClickUser = useCallback((id: number) => { 
    console.log("クリックされたユーザーID",id);
    onSelectUser({ id, users })
    onOpen()}, [users]) // ← 依存配列に記述を追加

  return (
    <>
      {loading ? (
        <Center h="100vh">
          <Spinner />
        </Center>
      ) : (
        <Wrap p={{ base: 4, md: 10 }}>
          {users.map((user) => (
            <WrapItem key={user.id} mx="auto">
              <UserCard id={user.id} imageUrl="https://picsum.photos/200" userName={user.username} fullName={user.name} onClick={onClickUser} />
            </WrapItem>
          ))}
        </Wrap >
      )}
      <UserDetailModal isOpen={isOpen} onClose={onClose} />
    </>
  )
})

```
# 参考
https://qiita.com/_limoza/items/e3f9dc187ae73817e9d1

# 終わりに
依存配列について学ぶことができました。

<br>

[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3707255/8bfacf61-7d8d-6d27-cb07-98d1f8f27fcd.png"  width=100%>](https://projisou.jp)