reactのpropsで渡しているデータのデフォルトデータを作りたい

Question

実現したいこと

ローカルでデータを確認するためにテストデータを作り、propsにデフォルトデータとして渡したいのですが、型チェックなどがあり、どういうデータの書き方をすればよいか分からないため、ご教授いただきたいです。

該当のソースコード

type User {
  address: String
  phone_number: [String]
}

import { User } from '../../UserType'

type Props = {
  data: any | undefined,
}

const UserData = ({data}:Props) => {
  const users = data ?? [] as User[]

  return (
    <div>
      {users
         .map((user: User, index: any) => (
          <div>{user.address}</div>
       ))}
    </div>
  }

export default UserData

試したこと

const testData = {"address": "test", "phone_number": ["12345"]}
上記を定義し、
const UserData = ({data = testData}:Props) => {
と記述したのですが、うまく表示されませんでした。
データの構造が合っていないからでしょうか？

Comments

[hoshi-takanori]

UserData の引数 props がまるごと省略された場合にはデフォルト引数を設定できますが、props.data など部分的に省略された場合はできないはず。
const users = data ?? [] as User[]
の部分でデフォルト値を設定すればいいのでは。ってか、data の型は any なのか User なのか User[] なのか…。

[kou1123]

propsをまるごと省略します。
const users = {"address": "test", "phone_number": ["12345"]}と設定してみたのですがうまくいきませんでした。
配列の作り方が間違っているのでしょうか？
エラーが解消できずanyを外せなくて…。

[maisumakun]

> うまくいきませんでした。

具体的に、どうなるのですか？ エラーメッセージなどが出ている状態なら、それをご提示ください。

[kou1123]

console.logでdataを確認したのですが、中に情報が入ってなかったです。

[maisumakun]

UserDataを呼び出す側のコードはどのようになっていますか？

[kou1123]

下記になります。
SearchDialogで入力された値でDBに検索しに行き、帰ってきたデータをUserDataに渡しています

import { useState } from 'react'
import { QueryHookOptions } from '@apollo/client'
import { Box } from '@mui/material'
import { useGetUsersByTest } from '../api/get-users-by-test'
import {
SearchType
} from '../features/search/type/SearchType'
import SearchDialog from '../SearchDialog'

const parseEq = (value: string): { eq: string } | undefined => {
if (value?.length > 0) {
return {eq: value}
}
return undefined
}

const parseLike = (value: string): { like: string } | undefined => {
if (value?.length > 0) {
return {like: `%${ value }%`}
}
return undefined
}

const getUsersOptions = (filter: Inputs | undefined): QueryHookOptions => {
if (filter && selectedGetUsersTest( filter )) {
return {
variables: {
filter: {
phone_number: parseEq( filter.phoneNumber ),
address: parseLike( filter.address )
}
},
skip: false,
}
}

return {
variables: undefined,
skip: true,
}
}

const selectedGetUsersTest = (filter: Inputs): boolean | undefined => {
return filter.searchType === SearchType.Test
}

export const SearchPage = () => {
const [dialogOpen, setDialogOpen] = useState<boolean>( true )
const [filter, setFilter] = useState<Inputs | undefined>( undefined )
const getUsersTest = useGetUsersByTest( getUsersOptions( filter ) )

const onSearchDialogSubmit = (values: Inputs): void => {
setDialogOpen( false )
setFilter( values )
}

const onSearchDialogClose = () => {
setDialogOpen( false )
}

const getData = (): any => {
if (filter) {
if (selectedGetUsersTest( filter )) {
return getUsersTest.data?.select_eov_users_by_test ?? []
}
}
return []
}

return (
<Box>
{ dialogOpen && <SearchDialog data={ filter } handleSubmitData={ onSearchDialogSubmit } handleClose={ onSearchDialogClose }/> }
<UserData data={ getData() } />
</Box>
)
}

Answer 1

JavaScriptでは[]もtrue扱いなので、[]を引数として渡してしまえばdata = testDataのデフォルト値が使われることはありません。

Comments

[maisumakun]

（dataのデータ型が不明確な問題はさておくとしても）渡された値が空配列なら、というようなコードで分岐して処理を行う必要があります。