Promiseのデータをmapで取得できない解決方法について

はじめに

supabaseに保存したデータをmapで取得できない解決方法について、共有させていただきます。

このように記述していました。

Register.tsx

import { Box, Button, Card, CardBody, CardHeader, Checkbox, CheckboxGroup, FormLabel, Heading, Input, Radio, RadioGroup, Stack, Textarea } from "@chakra-ui/react"
import { Controller, useForm } from "react-hook-form";
import { GetAllSkills } from "../lib/skills";

export const Register = () => {
  const { register, handleSubmit, control } = useForm();
  const skillsData = GetAllSkills();
  

  return (
    <div>
      <Card>
        <CardHeader>
          <Heading size='md'>新規名刺登録</Heading>
        </CardHeader>
        <CardBody>
          <Box>
            <form onSubmit={handleSubmit((data) => {
              console.log("dataの中身", data);
            })}>
              <FormLabel>ユーザーID</FormLabel>
              <Input type="text" placeholder="ユーザーIDを入力してください" {...register("user_id")} />
              <FormLabel>名前</FormLabel>
              <Input type="text" placeholder="名前を入力してください" {...register("name")} />
              <FormLabel>自己紹介</FormLabel>
              <Textarea placeholder="自己紹介文を入力してください。HTMLタグも使えます" {...register("description")} />
              <FormLabel>好きな技術</FormLabel>
              <Controller // controller使用しないと制御できない
                name="checkbox_data" // どのﾌｨｰﾙﾄﾞを管理するか指定
                defaultValue={[]} // ﾃﾞﾌｫﾙﾄの値
                control={control} // ﾌｫｰﾑｺﾝﾎﾟｰﾈﾝﾄを管理すためのもの
                render={({ field }) => { // fieldという決まった名称のオブジェクト
                  return (
                    <CheckboxGroup {...field}>
                      <Stack direction='row'>
                        {skillsData.map((skill) => (
                          <Checkbox key={skill.id} value={skill.name}>{skill.name}</Checkbox>
                        ))}
                      </Stack>
                    </CheckboxGroup>
                  );
                }}
              />
              <FormLabel>GitHub ID</FormLabel>
              <Input placeholder="IDを入力してください" {...register("github_id")} />
              <FormLabel>Qiita ID</FormLabel>
              <Input placeholder="IDを入力してください" {...register("qiita_id")} />
              <FormLabel>X ID</FormLabel>
              <Input placeholder="IDを入力してください" {...register("x_id")} />
              <Button type="submit">登録</Button>
            </form>
          </Box>
        </CardBody>
      </Card>


    </div >
  )

}

解決方法

useEffectでデータを取得、stateにデータを保持させ利用する

Register.tsx

import { Box, Button, Card, CardBody, CardHeader, Checkbox, CheckboxGroup, FormLabel, Heading, Input, Radio, RadioGroup, Stack, Textarea } from "@chakra-ui/react"
import { Controller, useForm } from "react-hook-form";
import { GetAllSkills } from "../lib/skills";
import { useEffect, useState } from "react";
import { Skills } from "../domain/skills";

export const Register = () => {
  const [ skillsData, setSkillsData ] = useState<Skills[]>([])
  const { register, handleSubmit, control } = useForm();
  

  useEffect(() => {
    const fetchSkills  = async() => {
      try {
        const data = await GetAllSkills();
        setSkillsData(data);
      } catch (error) {
        console.error("スキルデータの取得に失敗", error);
      }
    };
    fetchSkills();
  },[])


  return (
    <div>
      <Card>
        <CardHeader>
          <Heading size='md'>新規名刺登録</Heading>
        </CardHeader>
        <CardBody>
          <Box>
            <form onSubmit={handleSubmit((data) => {
              console.log("dataの中身", data);
            })}>
              <FormLabel>ユーザーID</FormLabel>
              <Input type="text" placeholder="ユーザーIDを入力してください" {...register("user_id")} />
              <FormLabel>名前</FormLabel>
              <Input type="text" placeholder="名前を入力してください" {...register("name")} />
              <FormLabel>自己紹介</FormLabel>
              <Textarea placeholder="自己紹介文を入力してください。HTMLタグも使えます" {...register("description")} />
              <FormLabel>好きな技術</FormLabel>
              <Controller // controller使用しないと制御できない
                name="checkbox_data" // どのﾌｨｰﾙﾄﾞを管理するか指定
                defaultValue={[]} // ﾃﾞﾌｫﾙﾄの値
                control={control} // ﾌｫｰﾑｺﾝﾎﾟｰﾈﾝﾄを管理すためのもの
                render={({ field }) => { // fieldという決まった名称のオブジェクト
                  return (
                    <CheckboxGroup {...field}>
                      <Stack direction='row'>
                        {skillsData.map((skill) => (
                          <Checkbox key={skill.id} value={skill.name}>{skill.name}</Checkbox>
                        ))}
                      </Stack>
                    </CheckboxGroup>
                  );
                }}
              />
              <FormLabel>GitHub ID</FormLabel>
              <Input placeholder="IDを入力してください" {...register("github_id")} />
              <FormLabel>Qiita ID</FormLabel>
              <Input placeholder="IDを入力してください" {...register("qiita_id")} />
              <FormLabel>X ID</FormLabel>
              <Input placeholder="IDを入力してください" {...register("x_id")} />
              <Button type="submit">登録</Button>
            </form>
          </Box>
        </CardBody>
      </Card>


    </div >
  )

}

補足

間違ったコードでは下記のようなエラーが表示されていました。

プロパティ 'map' は型 'Promise' に存在しません。ts(2339)
Register.tsx(36, 37): 'await' を使用することを忘れていませんか?
any

GetAllSkills()の中身を確認

const skillsData = GetAllSkills();
  console.log(skillsData);

Promise {<pending>}

待機状態のため取得できず、一旦データを取得する必要がありました。

おわりに

回数を重ねるとより理解が深まりますね。