質問編集履歴
5
誤字の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
|
|
57
57
|
```javascript
|
|
58
58
|
|
|
59
|
-
export default class
|
|
59
|
+
export default class GamePage extends React.Component {
|
|
60
60
|
|
|
61
61
|
constructor (props) {
|
|
62
62
|
|
4
App.jsを追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -88,6 +88,148 @@
|
|
|
88
88
|
|
|
89
89
|
```
|
|
90
90
|
|
|
91
|
+
```javascript
|
|
92
|
+
|
|
93
|
+
コードimport React ,{ Component }from 'react';
|
|
94
|
+
|
|
95
|
+
import './App.css';
|
|
96
|
+
|
|
97
|
+
import axios from 'axios';
|
|
98
|
+
|
|
99
|
+
import { withRouter,Switch, Route, Link, WrapMainContent } from 'react-router-dom'
|
|
100
|
+
|
|
101
|
+
import Start from './Start'
|
|
102
|
+
|
|
103
|
+
import DecisionPage from './DecisionPage'
|
|
104
|
+
|
|
105
|
+
import GamePage from './GamePage'
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
class App extends Component{
|
|
110
|
+
|
|
111
|
+
constructor(){
|
|
112
|
+
|
|
113
|
+
super();
|
|
114
|
+
|
|
115
|
+
this.getData = this.getData.bind(this);
|
|
116
|
+
|
|
117
|
+
this.state = {
|
|
118
|
+
|
|
119
|
+
registerNo : 0,
|
|
120
|
+
|
|
121
|
+
deckGroup : []
|
|
122
|
+
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
console.log(this.state.playerDeck);
|
|
126
|
+
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
getData = (name) =>{
|
|
132
|
+
|
|
133
|
+
console.log("stateって変わったの？");
|
|
134
|
+
|
|
135
|
+
axios
|
|
136
|
+
|
|
137
|
+
.get('http://127.0.0.1:8000/Play/Deck',{ params: {deckName: name}})
|
|
138
|
+
|
|
139
|
+
.then((results) => {
|
|
140
|
+
|
|
141
|
+
// APIからデッキデータを取得
|
|
142
|
+
|
|
143
|
+
const deck = results.data;
|
|
144
|
+
|
|
145
|
+
console.log(name);
|
|
146
|
+
|
|
147
|
+
// 取得したデッキデータをコピーしてsetstateする
|
|
148
|
+
|
|
149
|
+
const deckGroup_copy = this.state.deckGroup.slice();
|
|
150
|
+
|
|
151
|
+
deckGroup_copy[this.state.registerNo] = deck
|
|
152
|
+
|
|
153
|
+
// プレイヤーの人数分だけデッキを登録する
|
|
154
|
+
|
|
155
|
+
if(this.state.playernum > this.state.registerNo){
|
|
156
|
+
|
|
157
|
+
this.setState({
|
|
158
|
+
|
|
159
|
+
deckGroup: deckGroup_copy,
|
|
160
|
+
|
|
161
|
+
registerNo: this.state.registerNo + 1
|
|
162
|
+
|
|
163
|
+
});
|
|
164
|
+
|
|
165
|
+
// 人数を超えたらゲーム本編に遷移する
|
|
166
|
+
|
|
167
|
+
}else {this.props.history.push('/GamePage')}
|
|
168
|
+
|
|
169
|
+
console.log(this.state.deckGroup);
|
|
170
|
+
|
|
171
|
+
},
|
|
172
|
+
|
|
173
|
+
)
|
|
174
|
+
|
|
175
|
+
.catch(err => {
|
|
176
|
+
|
|
177
|
+
console.log(err);
|
|
178
|
+
|
|
179
|
+
});
|
|
180
|
+
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
selectPlayerNum = (e) =>{
|
|
186
|
+
|
|
187
|
+
this.setState({playernum: e})
|
|
188
|
+
|
|
189
|
+
console.log(this.state.playernum);
|
|
190
|
+
|
|
191
|
+
this.props.history.push('/DecisionPage')
|
|
192
|
+
|
|
193
|
+
};
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
render(){
|
|
198
|
+
|
|
199
|
+
console.log(this.state.deck);
|
|
200
|
+
|
|
201
|
+
console.log(this.state.playernum);
|
|
202
|
+
|
|
203
|
+
return (
|
|
204
|
+
|
|
205
|
+
<Switch>
|
|
206
|
+
|
|
207
|
+
// URLでマッチさせたい要素を書いていく
|
|
208
|
+
|
|
209
|
+
<Route exact path="/" render={() => <Start getPlayerNum={this.selectPlayerNum}/>} />
|
|
210
|
+
|
|
211
|
+
<Route exact path="/DecisionPage" render={() => <DecisionPage playernum= {this.state.playernum} getDeck= {this.getData}/>} /> />} />
|
|
212
|
+
|
|
213
|
+
<Route exact path="/GamePage" render={() => <GamePage playersDeck={this.state.deckGroup} playernum= {this.state.playernum}/>} />
|
|
214
|
+
|
|
215
|
+
</Switch>
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
|
|
219
|
+
);
|
|
220
|
+
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
|
|
226
|
+
|
|
227
|
+
export default withRouter(App);
|
|
228
|
+
|
|
229
|
+
|
|
230
|
+
|
|
231
|
+
```
|
|
232
|
+
|
|
91
233
|
|
|
92
234
|
|
|
93
235
|
ログを見るとconsole.log(this.props.playersDeck[0])では連想配列を取得できていますが、console.log(this.props.playersDeck[0]['id'])ではundefindedとなってしまっています。また、画面上にもdiv要素の中身が表示されていません。
|
3
画像追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
Reactで親コンポーネントから受け取った配列の中の連想配列を表示したいです。
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
](4367d17524f20d23bfc6cba2f9673bb8.png)
|
|
4
4
|
|
|
5
5
|
propsの中身は以下のとおりです。
|
|
6
6
|
|
2
画像追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Reactで親コンポーネントから受け取った配列の中の連想配列を表示したいです。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
1
画像追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Reactで親コンポーネントから受け取った配列の中の連想配列を表示したいです。
|
|
1
|
+
](8ce3b8d2308d4f85b9972921ff39cbba.png)Reactで親コンポーネントから受け取った配列の中の連想配列を表示したいです。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|