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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

2回答

2710閲覧

Reactで親コンポーネントから受け取った配列の中の連想配列を表示したい

BucharestNinja

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2019/09/05 13:41

編集2019/09/06 14:14

Reactで親コンポーネントから受け取った配列の中の連想配列を表示したいです。
イメージ説明
propsの中身は以下のとおりです。

[
{
"id": 5,
"deckName": "tora",
"card1": "a",
"card2": "a",
"card3": "a",
"card4": "a",
"card5": "a",
"card6": "a",
"card7": "a",
"card8": "a",
"card9": "a",
"card10": "a",
"card11": "a",
"card12": "aa",
"card13": "a",
"card14": "a",
"card15": "a",
"author": "a"
}
]

以下がコードとなります。

javascript

1export default class GamePage extends React.Component { 2 constructor (props) { 3 super(props) 4 console.log(this.props.playersDeck[0]['id']) 5 console.log(this.props.playersDeck[0]) 6 } 7 8 render(){ 9 return( 10 <div> 11 {this.props.playersDeck[0]['id']} 12 </div> 13 ) 14 } 15}

javascript

1コードimport React ,{ Component }from 'react'; 2import './App.css'; 3import axios from 'axios'; 4import { withRouter,Switch, Route, Link, WrapMainContent } from 'react-router-dom' 5import Start from './Start' 6import DecisionPage from './DecisionPage' 7import GamePage from './GamePage' 8 9class App extends Component{ 10 constructor(){ 11 super(); 12 this.getData = this.getData.bind(this); 13 this.state = { 14 registerNo : 0, 15 deckGroup : [] 16 } 17 console.log(this.state.playerDeck); 18 } 19 20 getData = (name) =>{ 21 console.log("stateって変わったの?"); 22 axios 23 .get('http://127.0.0.1:8000/Play/Deck',{ params: {deckName: name}}) 24 .then((results) => { 25 // APIからデッキデータを取得 26 const deck = results.data; 27 console.log(name); 28 // 取得したデッキデータをコピーしてsetstateする 29 const deckGroup_copy = this.state.deckGroup.slice(); 30 deckGroup_copy[this.state.registerNo] = deck 31 // プレイヤーの人数分だけデッキを登録する 32 if(this.state.playernum > this.state.registerNo){ 33 this.setState({ 34 deckGroup: deckGroup_copy, 35 registerNo: this.state.registerNo + 1 36 }); 37 // 人数を超えたらゲーム本編に遷移する 38 }else {this.props.history.push('/GamePage')} 39 console.log(this.state.deckGroup); 40 }, 41 ) 42 .catch(err => { 43 console.log(err); 44 }); 45 } 46 47 selectPlayerNum = (e) =>{ 48 this.setState({playernum: e}) 49 console.log(this.state.playernum); 50 this.props.history.push('/DecisionPage') 51 }; 52 53render(){ 54console.log(this.state.deck); 55console.log(this.state.playernum); 56 return ( 57 <Switch> 58 // URLでマッチさせたい要素を書いていく 59 <Route exact path="/" render={() => <Start getPlayerNum={this.selectPlayerNum}/>} /> 60 <Route exact path="/DecisionPage" render={() => <DecisionPage playernum= {this.state.playernum} getDeck= {this.getData}/>} /> />} /> 61 <Route exact path="/GamePage" render={() => <GamePage playersDeck={this.state.deckGroup} playernum= {this.state.playernum}/>} /> 62 </Switch> 63 64 ); 65 } 66} 67 68export default withRouter(App); 69

ログを見るとconsole.log(this.props.playersDeck[0])では連想配列を取得できていますが、console.log(this.props.playersDeck[0]['id'])ではundefindedとなってしまっています。また、画面上にもdiv要素の中身が表示されていません。

どうすれば配列の中の連想配列を表示できるのかどなたかご教示ください。

お手数ですが、よろしくお願いいたします。

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

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

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

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

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

thyda.eiqau

2019/09/06 11:21

console.log(this.props.playersDeck[0]) の結果をコピペして提示してください
BucharestNinja

2019/09/06 11:43

[{…}] 0: author: "a" card1: "a" card2: "a" card3: "a" card4: "a" card5: "a" card6: "a" card7: "a" card8: "a" card9: "a" card10: "a" card11: "a" card12: "aa" card13: "a" card14: "a" card15: "a" deckName: "tora" id: 5 __proto__: constructor: ƒ Object() hasOwnProperty: ƒ hasOwnProperty() isPrototypeOf: ƒ isPrototypeOf() propertyIsEnumerable: ƒ propertyIsEnumerable() toLocaleString: ƒ toLocaleString() toString: ƒ toString() valueOf: ƒ valueOf() __defineGetter__: ƒ __defineGetter__() __defineSetter__: ƒ __defineSetter__() __lookupGetter__: ƒ __lookupGetter__() __lookupSetter__: ƒ __lookupSetter__() get __proto__: ƒ __proto__() set __proto__: ƒ __proto__() length: 1 __proto__: Array(0) concat: ƒ concat() constructor: ƒ Array() copyWithin: ƒ copyWithin() entries: ƒ entries() every: ƒ every() fill: ƒ fill() filter: ƒ filter() find: ƒ find() findIndex: ƒ findIndex() flat: ƒ flat() flatMap: ƒ flatMap() forEach: ƒ forEach() includes: ƒ includes() indexOf: ƒ indexOf() join: ƒ join() keys: ƒ keys() lastIndexOf: ƒ lastIndexOf() length: 0 map: ƒ map() pop: ƒ pop() push: ƒ push() reduce: ƒ reduce() reduceRight: ƒ reduceRight() reverse: ƒ reverse() shift: ƒ shift() slice: ƒ slice() some: ƒ some() sort: ƒ sort() splice: ƒ splice() toLocaleString: ƒ toLocaleString() toString: ƒ toString() unshift: ƒ unshift() values: ƒ values() Symbol(Symbol.iterator): ƒ values() Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …} __proto__: Object
thyda.eiqau

2019/09/06 12:28

ふーむ…… console.log(this.props.playersDeck[0]['id']) の結果を、スクリーンショットもしくは質問本文にコードブロックの中に入れてコピペの形で提示いただけますか
BucharestNinja

2019/09/06 13:17

画像内で選択しているものがconsole.log(this.props.playersDeck[0]['id']) の結果になります。
guest

回答2

0

ベストアンサー

新規にcreate-react-appして App.js にこれだけ書いて動かしてみましたが、期待通りに動きました。typo等がないか再確認してください。

jsx

1import React from 'react'; 2 3class Start extends React.Component { 4 constructor(props) { 5 super(props); 6 console.log("props.playersDeck[0]['id'] : ", this.props.playersDeck[0]['id']); 7 console.log("props.playersDeck[0] : ", this.props.playersDeck[0]); 8 } 9 10 render() { 11 return <div>{this.props.playersDeck[0]['id']}</div>; 12 } 13} 14 15 16function App() { 17 return ( 18 <Start playersDeck={[ 19{ 20"id": 5, 21"deckName": "tora", 22"card1": "a", 23"card2": "a", 24"card3": "a", 25"card4": "a", 26"card5": "a", 27"card6": "a", 28"card7": "a", 29"card8": "a", 30"card9": "a", 31"card10": "a", 32"card11": "a", 33"card12": "aa", 34"card13": "a", 35"card14": "a", 36"card15": "a", 37"author": "a" 38} 39]} /> 40 ); 41} 42 43export default App;

screenshot

投稿2019/09/06 13:47

thyda.eiqau

総合スコア2982

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

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

BucharestNinja

2019/09/06 14:13

typoを確認しましたが特に見当たりませんでした。 App.jsでreact-routerを使っているのが関係しているのでしょうか……? 本文にApp.jsのコードを追加しましたので、もしよろしければご確認お願いします。
guest

0

this.props.playersDeck[0].id
でも取得できませんか?

投稿2019/09/06 02:00

yy_tn

総合スコア299

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

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

BucharestNinja

2019/09/06 10:10

undefinedとなり取得出来ませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問