質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

Next js Typescript 型定義をしたときに起きたエラー

kuralie
kuralie

総合スコア8

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

2グッド

0クリップ

352閲覧

投稿2022/12/07 01:51

編集2022/12/07 02:43

前提

TypeScriptで型定義を行いました。

その際に起こったエラーが解決できないのでご協力をお願いしたいです

行ったこと

型定義前

ShopCard.tsx

1import Shop from '../types/shops' 2 3export const ShopCard = (props: Shop) => { 4 const { name, description, price, image, holidays, comments } = props

変更後

ShopCard.tsx

1import Shop from '../types/shops' 2 3type Props = { 4 shop: Shop 5} 6 7const ShopCard: React.FC<Props> = ({ shop }) => { 8 const { name, description, price, image, holidays, comments } = shop

変更前にエラーはありませんでした

発生している問題・エラーメッセージ

TypeError: Cannot destructure property 'name' of 'shop' as it is undefined.

該当のソースコード

/types/shops.tsはこのように書いています

shops.ts

1type Shop = { 2 name: string 3 description: string 4 price: string 5 holidays: ShopHoliday[] 6 image: string 7 comments: Comment[] 8} 9 10export type ShopHoliday = { 11 wday: string 12} 13 14export type Comment = { 15 content: string 16 nickname: string 17 createdAt: string 18} 19 20export default Shop 21 22

ぜひご教授お願い致します。

追記

index.tsx

1import { ShopCard } from '../components' 2import { mockData } from 'mockData/ShopData' 3 4const Home: NextPage = () => { 5 return ( 6 <div> 7 <div className="gap-4 mx-auto px-6 py-3 w-fit max-w-[1200px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3"> 8 {mockData.map((item, index) => ( 9 <div key={index} className="border rounded-2xl border-gray-200 bg-white overflow-hidden max-w-[400px]"> 10 <Link href="/"> 11 <ShopCard 12 name={item.name} 13 description={item.description} 14 price={item.price} 15 image={item.image} 16 holidays={item.holidays} 17 comments={item.comments} 18 /> 19 </Link> 20 </div> 21 ))} 22 </div> 23 </div> 24 ) 25} 26 27export default Home
uky👍を押しています
uky🎉を押しています

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

uky

2022/12/07 02:11

`ShopCard.tsx`を利用しているコンポーネント側で`shop`は渡せていますでしょうか?
kuralie

2022/12/07 02:15

index.tsxを記載しました。 おそらく渡せていないのですが、この場合はどのように渡せばいいのか自分ではわからず...ぜひご教授お願い致します
uky

2022/12/07 02:18

回答書いてしまったので、回答追記します! しばしお待ちください!
kuralie

2022/12/07 02:20

お優しい,,,ありがとうございます
uky

2022/12/07 02:26

回答追記しました! 何かわからないことあれば回答にコメントください!
uky

2022/12/07 02:33

ちなみにこれはどうでもいい話なのですが、 Next.jsではなくReactに関する質問なので、Reactのタグも追加することを推奨します。
kuralie

2022/12/07 02:43

ありがとうございます!

回答1

0

ベストアンサー

変更前のShopCardのprops

props: { name: string description: string price: string holidays: ShopHoliday[] image: string comments: Comment[] }

変更後のShopCardのprops

props: { shop: { name: string description: string price: string holidays: ShopHoliday[] image: string comments: Comment[] } }

と、構造が変っているため、
ShopCardを利用するコンポーネント側で渡す値を修正する必要があります。


追記

ShopCardのpropsの型変更に伴って、
それぞれの値(namedescriptionなど) を一つずつ入れるのではなくshop というオブジェクトを渡す必要があります。

変更前

index.tsx

1~~ 省略 ~~ 2<ShopCard 3 name={item.name} 4 description={item.description} 5 price={item.price} 6 image={item.image} 7 holidays={item.holidays} 8 comments={item.comments} 9/> 10~~ 省略 ~~

変更後

index.tsx

1~~ 省略 ~~ 2<ShopCard 3 shop={item} 4/> 5~~ 省略 ~~

投稿2022/12/07 02:17

編集2022/12/07 02:25
uky

総合スコア90

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

kuralie

2022/12/07 02:32

なるほど、、これだけで渡せるようになるのですね。。。勉強不足でした。ありがとうございます!これからもがんばります
uky

2022/12/07 02:34

💪

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。