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

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

新規登録して質問してみよう
ただいま回答率
85.46%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

React.js

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

Q&A

解決済

2回答

2699閲覧

Reactでmapが使えない

dolaemon

総合スコア1

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

React.js

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

0グッド

0クリップ

投稿2020/11/16 07:11

Reactでmapが使えない

Reactでマインスイーパーを作っていますが、map関数でエラーが出てしまいます。

なぜmap関数が使えないのか教えてください。
参考動画↓
https://www.youtube.com/watch?v=BLdd0zP-tAw
この方の動画の23分頃と同じソースコードです

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

TypeError: Cannot read property 'map' of undefined

該当のソースコード

Board.js

import React, { useState, useEffect } from "react"; import CreateBoard from "../util/CreateBoard"; const Board = () =>{ //↓フック: const [オブジェクト, オブジェクトを変更する時呼び出すメソッド] = useState(変数の初期値) // メリットクラスを書かずにstateを利用できる const [grid, setGrid] = useState([]); useEffect(() => { function freshBoard(){ const newBoard = CreateBoard(5, 5, 10); setGrid(newBoard); } freshBoard(); }, []); /*if(!grid.board){ return <div>Loading</div>; } */ // ↓ここがエラーのmapです return grid.board.map(singleRow=>{ return <div>{JSON.stringify(singleRow)}</div> }); }; export default Board;

追加のコード

CreateBoard.js

export default (row, col, bombs) => { let board = [];     /*1行に列数分のマスデータを格納している配列 を行数分格納する配列 */ let mineLocation = []; //ボムの場所を格納する配列 //空白のボード作成 //マスの情報を初期化 for(let x = 0; x < row; x++){ //横列の初期化 let subCol =[];  //1行に列数分のマスデータを格納する配列 for(let y = 0; y < col; y++){ //縦列の初期化 //push(): 配列の末尾に要素を追加 subCol.push( { value: 0, revealed: false, x: x, y: y, flagged: false, } ); } board.push(subCol); } //ボムの場所をランダムで決める let bombsCount = 0; while (bombsCount < bombs){ //0 ~ 行数(列数)-1 乱数取得 let x = randomNum(0, row - 1); let y = randomNum(0, col - 1); //valueが0の時はボム判定 if(board[x][y].value === 0){ //ボムをXで表示 board[x][y].value = "X"; //ボムの場所を格納 mineLocation.push([x,y]); //ボムの数をカウント bombsCount++; } } //マスの周りのボムの数を決める for(let roww = 0; roww < row; roww++){ for(let coll = 0; coll < col; col++){ if(board[roww][coll].value === "X"){ //対象マスがボムであったとき continue; } //対象マスの真上 if(roww > 0 && board[roww - 1][coll].value === "X"){ board[roww][coll].value++; } //対象マスの右上 if ( roww > 0 && coll < col - 1 && board[roww - 1][coll + 1].value === "X" ) { board[roww][coll].value++; } // 対象マスの右 if (coll < col - 1 && board[roww][coll + 1].value === "X") { board[roww][coll].value++; } // 対象マスの右下 if ( roww < row - 1 && coll < col - 1 && board[roww + 1][coll + 1].value === "X" ) { board[roww][coll].value++; } // 対象マスの真下 if (roww < row - 1 && board[roww + 1][coll].value === "X") { board[roww][coll].value++; } // 対象マスの左下 if ( roww < row - 1 && coll > 0 && board[roww + 1][coll - 1].value === "X" ) { board[roww][coll].value++; } // 対象マスの左 if (coll > 0 && board[roww][coll - 1].value === "X") { board[roww][coll].value++; } // 対象マスの左上 if (roww > 0 && coll > 0 && board[roww - 1][coll - 1].value === "X") { board[roww][coll].value++; } } } return {board, mineLocation}; }; //ランダム関数 function randomNum(min = 0,max){ return Math.floor(Math.random() * (max - min + 1) + min); }

試したこと

ソースコードの確認
エラー文の検索

補足情報(FW/ツールのバージョンなど)

Node.jsはインストール済みです。
バージョンは12.19.0です
npmは
6.14.8です

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

gridの初期値が単なる配列の[]なので、grid.boardundefinedです。

const [grid, setGrid] = useState(() => CreateBoard(5, 5, 10));のように妥当な値を初期値にしておきましょう。

投稿2020/11/16 07:14

maisumakun

総合スコア145208

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dolaemon

2020/11/16 07:23

useEffect内のコードはどうするべきですか?
maisumakun

2020/11/16 07:30

特に変える必要はありません(というより、「useEffect内のコードに合わせた初期値を設定する」という解決策です)。
dolaemon

2020/11/16 07:36

ありがとうございます。やってみます。
dolaemon

2020/11/17 05:02

npm startでコンパイルしようとすると応答がないです。Stack Overflowしているのでしょうか?
maisumakun

2020/11/17 05:17

「応答がない」のは、コンソール内での話ですか?ブラウザ上ででしょうか?
dolaemon

2020/11/19 01:37

ブラウザ上です。
maisumakun

2020/11/19 01:47

ブラウザコンソールにエラーなどは出ていませんか?
dolaemon

2020/11/19 01:53

エラーは出ていません。
maisumakun

2020/11/19 02:00

Reactの問題ではなく、createBoardで「for(let coll = 0; coll < col; col++)」となっていて、collは永遠に書き換わらず0のままなので無限ループしています。
dolaemon

2020/11/19 03:10

ありがとうございます。直してみます。
dolaemon

2020/11/20 00:34

直りました!!ありがとうございました。
guest

0

setGrid(newBoard);

gridboardをそのままセットしているので入れ子ではなく、gridboardになってしまっているのではないですか?
grid.board.mapではなくgrid.mapなら動作しそうですが・・・

追記

すいません、上記は誤答でした。
useEffectの第二引数が[]なのが原因のようですね。

投稿2020/11/16 07:15

編集2020/11/16 07:17
nekoniki

総合スコア2411

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dolaemon

2020/11/16 07:23

[]がいらないということですか?
nekoniki

2020/11/16 07:29

[]ではなく{ board: [] }のようにboardの初期値を持たせる必要があります。 今のままだとgridの初期値が[]なので、grid.boardと指定してもboardが未定義のため当該のエラーが発生しています。
dolaemon

2020/11/16 07:30

ありがとうございます。一度やってみます。
dolaemon

2020/11/16 07:40

すいません。boardの初期値の設定のところを具体的なコードで教えてくれませんか?
nekoniki

2020/11/16 07:54

先に書いた通りです。 userEffectの第二引数の[]を{ board: [] }に変えます。
dolaemon

2020/11/17 00:32

変えてみましたが、直りませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問