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

編集履歴

質問編集履歴

3

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

2020/01/27 15:29

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- 関数内の値を引き継いでしまう。
1
+ 直前のstateを取得したい
body CHANGED
@@ -21,7 +21,11 @@
21
21
  }
22
22
  }
23
23
 
24
- // 複数方向から裏返すことができるかテストしています。
24
+ // defaultBoard[3][3] = BLACK_PIECE
25
+ // defaultBoard[4][3] = WHITE_PIECE
26
+ // defaultBoard[3][4] = WHITE_PIECE
27
+ // defaultBoard[4][4] = BLACK_PIECE
28
+
25
29
  defaultBoard[0][0] = WHITE_PIECE
26
30
  defaultBoard[1][0] = BLACK_PIECE
27
31
  defaultBoard[2][0] = WHITE_PIECE
@@ -31,6 +35,23 @@
31
35
  defaultBoard[6][0] = WHITE_PIECE
32
36
  defaultBoard[7][0] = WHITE_PIECE
33
37
 
38
+ // defaultBoard[4][1] = WHITE_PIECE
39
+ // defaultBoard[4][2] = WHITE_PIECE
40
+ // defaultBoard[4][3] = WHITE_PIECE
41
+ // defaultBoard[4][4] = WHITE_PIECE
42
+ // defaultBoard[4][5] = WHITE_PIECE
43
+ // defaultBoard[4][6] = BLACK_PIECE
44
+ // defaultBoard[4][7] = WHITE_PIECE
45
+
46
+ // defaultBoard[3][1] = WHITE_PIECE
47
+ // defaultBoard[2][2] = WHITE_PIECE
48
+ // defaultBoard[1][3] = BLACK_PIECE
49
+ // defaultBoard[0][4] = WHITE_PIECE
50
+
51
+ // defaultBoard[5][1] = WHITE_PIECE
52
+ // defaultBoard[6][2] = WHITE_PIECE
53
+ // defaultBoard[7][3] = WHITE_PIECE
54
+
34
55
  const Board = () => {
35
56
  const [squares, setSquares] = useState(defaultBoard)
36
57
  const [currentPiece, setCurrentPiece] = useState(BLACK_PIECE)
@@ -59,43 +80,46 @@
59
80
 
60
81
  const reversePiece = (currentX, currentY, x, y) => {
61
82
  const nextPiece = currentPiece === BLACK_PIECE ? WHITE_PIECE : BLACK_PIECE
83
+ let newSquares = squares.concat()
62
84
  let nextYIndex = currentY + y
63
85
  let nextXIndex = currentX + x
64
86
 
65
- if (squares[nextYIndex][nextXIndex] === nextPiece) {
87
+ if (newSquares[nextYIndex][nextXIndex] === nextPiece) {
66
- let newSquares = squares.concat()
67
88
  newSquares[currentY][currentX] = currentPiece
68
89
 
69
90
  while(true) {
70
91
  if (newSquares[nextYIndex][nextXIndex] === currentPiece) {
92
+ setCurrentPiece(nextPiece)
71
93
  setSquares(newSquares)
72
- setCurrentPiece(nextPiece)
73
94
  break
74
95
  }
75
96
  if (newSquares[nextYIndex][nextXIndex] === null) {
97
+ // breakする前に元の配列に戻す
98
+ setSquares(squares)
76
99
  break
77
100
  }
78
101
  newSquares[nextYIndex][nextXIndex] = currentPiece
79
102
  nextYIndex = nextYIndex + y
80
103
  nextXIndex = nextXIndex + x
81
104
  if (nextYIndex > 7 || nextYIndex < 0 || nextXIndex > 7 || nextXIndex < 0) {
105
+ // breakする前に元の配列に戻す
106
+ setSquares(squares)
82
107
  break
83
108
  }
84
109
  }
85
110
  }
86
111
  }
87
112
 
88
-
89
113
  const handleClick = (x, y) => {
90
114
  if (squares[y][x] === null) {
91
- // reversePiece(x, y, 0, -1) // 上
92
115
  // reversePiece(x, y, 1, 0) // 右
93
116
  reversePiece(x, y, 0, 1) // 下
117
+ reversePiece(x, y, 0, -1) // 上
94
118
  // reversePiece(x, y, 1, 1) // 右下
119
+ // reversePiece(x, y, 1, -1) // 右上
95
120
  // reversePiece(x, y, -1, 0) // 左
121
+ // reversePiece(x, y, -1, 1) // 左下
96
- // reversePiece(x, y, 1, -1) // 右上
122
+ // reversePiece(x, y, -1, -1) // 左上
97
- // reversePiece(x, y, -1, 1) // 左下 ok
98
- // reversePiece(x, y, -1, -1) // 左上 ok
99
123
  }
100
124
  }
101
125
 
@@ -151,68 +175,31 @@
151
175
  }
152
176
 
153
177
  export default Board;
178
+
154
179
  ```
155
180
 
156
181
  実際の画面はこちらです。(裏返すことができるかテストするために駒を様々な箇所に設置しています。)
157
182
  ![イメージ説明](8fdad3921270cfb24af9bd4bc24d6e2a.png)
158
183
 
159
- 上記の記述のうち、クリックした時に駒を裏返すことができるか１マスずつ判定しつつ、裏返していくメソッド(下記コード)を作成したのですが、
184
+ 上記の記述のうち、クリックした時に駒を裏返すことができるか１マスずつ判定しつつ、以下の２つの条件に当てはまる場合にはまだ裏返されていない直前のstateを反映させたいのですが、
160
-
185
+ - 自分のコマと挟み撃ちできていない
186
+ - 自分のコマがないままnullである場合
161
187
  ```js
162
- const reversePiece = (currentX, currentY, x, y) => {
163
- const nextPiece = currentPiece === BLACK_PIECE ? WHITE_PIECE : BLACK_PIECE
164
- let nextYIndex = currentY + y
165
- let nextXIndex = currentX + x
166
-
167
- if (squares[nextYIndex][nextXIndex] === nextPiece) {
168
- let newSquares = squares.concat()
169
- newSquares[currentY][currentX] = currentPiece
170
-
171
- while(true) {
172
- if (newSquares[nextYIndex][nextXIndex] === currentPiece) {
188
+ if (newSquares[nextYIndex][nextXIndex] === null) {
189
+ // breakする前に元の配列に戻す
190
+ console.log(squares) //これで調べても裏返ったあとのstate(下記画像のような)しか取得できない
173
- setSquares(newSquares)
191
+ setSquares(squares)
174
- setCurrentPiece(nextPiece)
175
- break
192
+ break
176
- }
177
- if (newSquares[nextYIndex][nextXIndex] === null) {
178
- break
179
- }
180
- newSquares[nextYIndex][nextXIndex] = currentPiece
181
- nextYIndex = nextYIndex + y
182
- nextXIndex = nextXIndex + x
183
- if (nextYIndex > 7 || nextYIndex < 0 || nextXIndex > 7 || nextXIndex < 0) {
184
- break
185
- }
186
- }
187
- }
188
193
  }
194
+ if (nextYIndex > 7 || nextYIndex < 0 || nextXIndex > 7 || nextXIndex < 0) {
189
- ```
195
+ // breakする前に元の配列に戻す
190
-
196
+ console.log(squares) //これで調べても裏返ったあとのstate(下記画像のような)しか取得できない
191
- 単一方向だけメソッドを読んだ場合だと
197
+ setSquares(squares)
192
- ・上側は黒の駒まで黒が裏返り、
193
- ・下側は裏返らずそのまま
194
- ```js
198
+ break
195
- const handleClick = (x, y) => {
196
- reversePiece(x, y, 0, -1) // 上
197
- もしくは
198
- reversePiece(x, y, 0, 1) // 下
199
199
  }
200
-
201
200
  ```
202
-
203
- 複数の方向だけメソッドを読んだ場合とで挙動が全く違い、
204
- ・上側は黒のコマまで黒が裏返り、
205
- ・下側は全て裏返ってしまう。
206
- ```js
207
- const handleClick = (x, y) => {
208
- reversePiece(x, y, 0, -1) // 上
201
+ ![イメージ説明](f675834774a4d6516ab4bb156645ded7.png)
209
- reversePiece(x, y, 0, 1) // 下
210
- }
211
-
212
- ```
213
-
214
202
  と下側の駒まで裏返ってしまいます。
215
- ![イメージ説明](f675834774a4d6516ab4bb156645ded7.png)
203
+ なお、一つずつ方向を記述した場合だと成功するので、裏返なかった結果になっても次のメソッドで一緒に反映されてしまうみたいです。
216
-
217
- 複数の方向を読んだ時は継続してメソッド内の変数を使用してしまうのでしょうか。
204
+ どのように記述すると直前のstateを取得できるのでしょうか。
218
205
  よろしくお願いします。

2

記述が違う

2020/01/27 15:29

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -160,33 +160,32 @@
160
160
 
161
161
  ```js
162
162
  const reversePiece = (currentX, currentY, x, y) => {
163
- const nextPiece = currentPiece === BLACK_PIECE ? WHITE_PIECE : BLACK_PIECE
163
+ const nextPiece = currentPiece === BLACK_PIECE ? WHITE_PIECE : BLACK_PIECE
164
- let nextYIndex = currentY + y
164
+ let nextYIndex = currentY + y
165
- let nextXIndex = currentX + x
165
+ let nextXIndex = currentX + x
166
166
 
167
- if (squares[currentY][currentX] === null && squares[nextYIndex][nextXIndex] === nextPiece) {
167
+ if (squares[nextYIndex][nextXIndex] === nextPiece) {
168
- let newSquares = squares.concat()
168
+ let newSquares = squares.concat()
169
- let isNotExistSamePiece = true
169
+ newSquares[currentY][currentX] = currentPiece
170
170
 
171
- while(isNotExistSamePiece) {
171
+ while(true) {
172
- if (newSquares[nextYIndex][nextXIndex] === currentPiece) {
172
+ if (newSquares[nextYIndex][nextXIndex] === currentPiece) {
173
- isNotExistSamePiece = false
174
- }
175
- if (newSquares[nextYIndex][nextXIndex] === null) {
176
- break
177
- }
178
- newSquares[nextYIndex][nextXIndex] = currentPiece
179
- newSquares[currentY][currentX] = currentPiece
180
- nextYIndex = nextYIndex + y
181
- nextXIndex = nextXIndex + x
182
- }
183
-
184
- if (!isNotExistSamePiece) {
185
173
  setSquares(newSquares)
186
174
  setCurrentPiece(nextPiece)
175
+ break
187
176
  }
177
+ if (newSquares[nextYIndex][nextXIndex] === null) {
178
+ break
179
+ }
180
+ newSquares[nextYIndex][nextXIndex] = currentPiece
181
+ nextYIndex = nextYIndex + y
182
+ nextXIndex = nextXIndex + x
183
+ if (nextYIndex > 7 || nextYIndex < 0 || nextXIndex > 7 || nextXIndex < 0) {
184
+ break
185
+ }
188
186
  }
189
187
  }
188
+ }
190
189
  ```
191
190
 
192
191
  単一方向だけメソッドを読んだ場合だと

1

余計なメモがあった

2020/01/27 13:22

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -100,7 +100,6 @@
100
100
  }
101
101
 
102
102
  // 縦軸y, 横軸x
103
- // FIXME: なんかこれ変
104
103
  const renderSquare = (boardRow, y) => {
105
104
  return (
106
105
  boardRow[y].map((square, x) => {