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要素の中身が表示されていません。
どうすれば配列の中の連想配列を表示できるのかどなたかご教示ください。
お手数ですが、よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー