teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問直前のstateを取得したい

編集履歴

質問編集履歴

3

質問内容自体を変更しました。

2020/01/27 15:29

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- 関数内の値を引き継いでしまう。
1
+ 直前のstateを取得したい
test CHANGED
@@ -44,7 +44,15 @@
44
44
 
45
45
 
46
46
 
47
- // 複数方向から裏返すことができるかテストしています。
47
+ // defaultBoard[3][3] = BLACK_PIECE
48
+
49
+ // defaultBoard[4][3] = WHITE_PIECE
50
+
51
+ // defaultBoard[3][4] = WHITE_PIECE
52
+
53
+ // defaultBoard[4][4] = BLACK_PIECE
54
+
55
+
48
56
 
49
57
  defaultBoard[0][0] = WHITE_PIECE
50
58
 
@@ -64,6 +72,40 @@
64
72
 
65
73
 
66
74
 
75
+ // defaultBoard[4][1] = WHITE_PIECE
76
+
77
+ // defaultBoard[4][2] = WHITE_PIECE
78
+
79
+ // defaultBoard[4][3] = WHITE_PIECE
80
+
81
+ // defaultBoard[4][4] = WHITE_PIECE
82
+
83
+ // defaultBoard[4][5] = WHITE_PIECE
84
+
85
+ // defaultBoard[4][6] = BLACK_PIECE
86
+
87
+ // defaultBoard[4][7] = WHITE_PIECE
88
+
89
+
90
+
91
+ // defaultBoard[3][1] = WHITE_PIECE
92
+
93
+ // defaultBoard[2][2] = WHITE_PIECE
94
+
95
+ // defaultBoard[1][3] = BLACK_PIECE
96
+
97
+ // defaultBoard[0][4] = WHITE_PIECE
98
+
99
+
100
+
101
+ // defaultBoard[5][1] = WHITE_PIECE
102
+
103
+ // defaultBoard[6][2] = WHITE_PIECE
104
+
105
+ // defaultBoard[7][3] = WHITE_PIECE
106
+
107
+
108
+
67
109
  const Board = () => {
68
110
 
69
111
  const [squares, setSquares] = useState(defaultBoard)
@@ -120,15 +162,15 @@
120
162
 
121
163
  const nextPiece = currentPiece === BLACK_PIECE ? WHITE_PIECE : BLACK_PIECE
122
164
 
165
+ let newSquares = squares.concat()
166
+
123
167
  let nextYIndex = currentY + y
124
168
 
125
169
  let nextXIndex = currentX + x
126
170
 
127
171
 
128
172
 
129
- if (squares[nextYIndex][nextXIndex] === nextPiece) {
173
+ if (newSquares[nextYIndex][nextXIndex] === nextPiece) {
130
-
131
- let newSquares = squares.concat()
132
174
 
133
175
  newSquares[currentY][currentX] = currentPiece
134
176
 
@@ -138,16 +180,20 @@
138
180
 
139
181
  if (newSquares[nextYIndex][nextXIndex] === currentPiece) {
140
182
 
183
+ setCurrentPiece(nextPiece)
184
+
141
185
  setSquares(newSquares)
142
186
 
143
- setCurrentPiece(nextPiece)
144
-
145
187
  break
146
188
 
147
189
  }
148
190
 
149
191
  if (newSquares[nextYIndex][nextXIndex] === null) {
150
192
 
193
+ // breakする前に元の配列に戻す
194
+
195
+ setSquares(squares)
196
+
151
197
  break
152
198
 
153
199
  }
@@ -160,6 +206,10 @@
160
206
 
161
207
  if (nextYIndex > 7 || nextYIndex < 0 || nextXIndex > 7 || nextXIndex < 0) {
162
208
 
209
+ // breakする前に元の配列に戻す
210
+
211
+ setSquares(squares)
212
+
163
213
  break
164
214
 
165
215
  }
@@ -172,27 +222,25 @@
172
222
 
173
223
 
174
224
 
175
-
176
-
177
225
  const handleClick = (x, y) => {
178
226
 
179
227
  if (squares[y][x] === null) {
180
228
 
181
- // reversePiece(x, y, 0, -1) // 上
182
-
183
229
  // reversePiece(x, y, 1, 0) // 右
184
230
 
185
231
  reversePiece(x, y, 0, 1) // 下
186
232
 
233
+ reversePiece(x, y, 0, -1) // 上
234
+
187
235
  // reversePiece(x, y, 1, 1) // 右下
188
236
 
237
+ // reversePiece(x, y, 1, -1) // 右上
238
+
189
239
  // reversePiece(x, y, -1, 0) // 左
190
240
 
241
+ // reversePiece(x, y, -1, 1) // 左下
242
+
191
- // reversePiece(x, y, 1, -1) // 右上
243
+ // reversePiece(x, y, -1, -1) // 左上
192
-
193
- // reversePiece(x, y, -1, 1) // 左下 ok
194
-
195
- // reversePiece(x, y, -1, -1) // 左上 ok
196
244
 
197
245
  }
198
246
 
@@ -304,6 +352,8 @@
304
352
 
305
353
  export default Board;
306
354
 
355
+
356
+
307
357
  ```
308
358
 
309
359
 
@@ -314,122 +364,46 @@
314
364
 
315
365
 
316
366
 
317
- 上記の記述のうち、クリックした時に駒を裏返すことができるか１マスずつ判定しつつ、裏返していくメソッド(下記コード)を作成したのですが、
367
+ 上記の記述のうち、クリックした時に駒を裏返すことができるか１マスずつ判定しつつ、以下の２つの条件に当てはまる場合にはまだ裏返されていない直前のstateを反映させたいのですが、
368
+
318
-
369
+ - 自分のコマと挟み撃ちできていない
370
+
319
-
371
+ - 自分のコマがないままnullである場合
320
372
 
321
373
  ```js
322
374
 
323
- const reversePiece = (currentX, currentY, x, y) => {
324
-
325
- const nextPiece = currentPiece === BLACK_PIECE ? WHITE_PIECE : BLACK_PIECE
326
-
327
- let nextYIndex = currentY + y
328
-
329
- let nextXIndex = currentX + x
330
-
331
-
332
-
333
- if (squares[nextYIndex][nextXIndex] === nextPiece) {
334
-
335
- let newSquares = squares.concat()
336
-
337
- newSquares[currentY][currentX] = currentPiece
338
-
339
-
340
-
341
- while(true) {
342
-
343
- if (newSquares[nextYIndex][nextXIndex] === currentPiece) {
375
+ if (newSquares[nextYIndex][nextXIndex] === null) {
376
+
344
-
377
+ // breakする前に元の配列に戻す
378
+
379
+ console.log(squares) //これで調べても裏返ったあとのstate(下記画像のような)しか取得できない
380
+
345
- setSquares(newSquares)
381
+ setSquares(squares)
346
-
347
- setCurrentPiece(nextPiece)
382
+
348
-
349
- break
383
+ break
350
-
351
- }
352
-
353
- if (newSquares[nextYIndex][nextXIndex] === null) {
354
-
355
- break
356
-
357
- }
358
-
359
- newSquares[nextYIndex][nextXIndex] = currentPiece
360
-
361
- nextYIndex = nextYIndex + y
362
-
363
- nextXIndex = nextXIndex + x
364
-
365
- if (nextYIndex > 7 || nextYIndex < 0 || nextXIndex > 7 || nextXIndex < 0) {
366
-
367
- break
368
-
369
- }
370
-
371
- }
372
-
373
- }
374
384
 
375
385
  }
376
386
 
387
+ if (nextYIndex > 7 || nextYIndex < 0 || nextXIndex > 7 || nextXIndex < 0) {
388
+
389
+ // breakする前に元の配列に戻す
390
+
391
+ console.log(squares) //これで調べても裏返ったあとのstate(下記画像のような)しか取得できない
392
+
393
+ setSquares(squares)
394
+
395
+ break
396
+
397
+ }
398
+
377
399
  ```
378
400
 
379
-
380
-
381
- 単一方向だけメソッドを読んだ場合だと
382
-
383
- ・上側は黒の駒まで黒が裏返り、
384
-
385
- ・下側は裏返らずそのまま
386
-
387
- ```js
388
-
389
- const handleClick = (x, y) => {
390
-
391
- reversePiece(x, y, 0, -1) // 上
401
+ ![イメージ説明](f675834774a4d6516ab4bb156645ded7.png)
392
-
393
- もしくは
394
-
395
- reversePiece(x, y, 0, 1) // 下
396
-
397
- }
398
-
399
-
400
-
401
- ```
402
-
403
-
404
-
405
- 複数の方向だけメソッドを読んだ場合とで挙動が全く違い、
406
-
407
- ・上側は黒のコマまで黒が裏返り、
408
-
409
- ・下側は全て裏返ってしまう。
410
-
411
- ```js
412
-
413
- const handleClick = (x, y) => {
414
-
415
- reversePiece(x, y, 0, -1) // 上
416
-
417
- reversePiece(x, y, 0, 1) // 下
418
-
419
- }
420
-
421
-
422
-
423
- ```
424
-
425
-
426
402
 
427
403
  と下側の駒まで裏返ってしまいます。
428
404
 
429
- ![イメージ説明](f675834774a4d6516ab4bb156645ded7.png)
405
+ なお、一つずつ方向を記述した場合だと成功するので、裏返なかった結果になっても次のメソッドで一緒に反映されてしまうみたいです。
430
-
431
-
432
-
406
+
433
- 複数の方向を読んだ時は継続してメソッド内の変数を使用してしまうのでしょうか。
407
+ どのように記述すると直前のstateを取得できるのでしょうか。
434
408
 
435
409
  よろしくお願いします。

2

記述が違う

2020/01/27 15:29

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -322,60 +322,58 @@
322
322
 
323
323
  const reversePiece = (currentX, currentY, x, y) => {
324
324
 
325
- const nextPiece = currentPiece === BLACK_PIECE ? WHITE_PIECE : BLACK_PIECE
325
+ const nextPiece = currentPiece === BLACK_PIECE ? WHITE_PIECE : BLACK_PIECE
326
-
326
+
327
- let nextYIndex = currentY + y
327
+ let nextYIndex = currentY + y
328
-
328
+
329
- let nextXIndex = currentX + x
329
+ let nextXIndex = currentX + x
330
-
331
-
332
-
330
+
331
+
332
+
333
- if (squares[currentY][currentX] === null && squares[nextYIndex][nextXIndex] === nextPiece) {
333
+ if (squares[nextYIndex][nextXIndex] === nextPiece) {
334
-
334
+
335
- let newSquares = squares.concat()
335
+ let newSquares = squares.concat()
336
-
336
+
337
- let isNotExistSamePiece = true
337
+ newSquares[currentY][currentX] = currentPiece
338
-
339
-
340
-
338
+
339
+
340
+
341
- while(isNotExistSamePiece) {
341
+ while(true) {
342
-
342
+
343
- if (newSquares[nextYIndex][nextXIndex] === currentPiece) {
343
+ if (newSquares[nextYIndex][nextXIndex] === currentPiece) {
344
+
344
-
345
+ setSquares(newSquares)
346
+
345
- isNotExistSamePiece = false
347
+ setCurrentPiece(nextPiece)
346
-
347
- }
348
+
348
-
349
- if (newSquares[nextYIndex][nextXIndex] === null) {
350
-
351
- break
349
+ break
352
-
353
- }
354
-
355
- newSquares[nextYIndex][nextXIndex] = currentPiece
356
-
357
- newSquares[currentY][currentX] = currentPiece
358
-
359
- nextYIndex = nextYIndex + y
360
-
361
- nextXIndex = nextXIndex + x
362
350
 
363
351
  }
364
352
 
365
-
366
-
367
- if (!isNotExistSamePiece) {
368
-
369
- setSquares(newSquares)
370
-
371
- setCurrentPiece(nextPiece)
353
+ if (newSquares[nextYIndex][nextXIndex] === null) {
354
+
355
+ break
372
356
 
373
357
  }
374
358
 
359
+ newSquares[nextYIndex][nextXIndex] = currentPiece
360
+
361
+ nextYIndex = nextYIndex + y
362
+
363
+ nextXIndex = nextXIndex + x
364
+
365
+ if (nextYIndex > 7 || nextYIndex < 0 || nextXIndex > 7 || nextXIndex < 0) {
366
+
367
+ break
368
+
369
+ }
370
+
375
371
  }
376
372
 
377
373
  }
378
374
 
375
+ }
376
+
379
377
  ```
380
378
 
381
379
 

1

余計なメモがあった

2020/01/27 13:22

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -202,8 +202,6 @@
202
202
 
203
203
  // 縦軸y, 横軸x
204
204
 
205
- // FIXME: なんかこれ変
206
-
207
205
  const renderSquare = (boardRow, y) => {
208
206
 
209
207
  return (