質問編集履歴
4
コメントを受け、エラーやプログラムの修正を本文に記述しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -123,21 +123,36 @@
|
|
|
123
123
|
```
|
|
124
124
|
|
|
125
125
|
### 試したこと
|
|
126
|
+
当該ソースコード内にもあるボタンがクリックされた際に動作する関数
|
|
126
127
|
```
|
|
127
128
|
this.setState(state => ({
|
|
128
129
|
isToggleOn: !state.isToggleOn,
|
|
129
130
|
flag: this.state.flag + 1,
|
|
130
131
|
}));
|
|
131
132
|
```
|
|
132
|
-
|
|
133
|
+
のプログラム内部で
|
|
133
134
|
```
|
|
134
135
|
this.setState(state => ({
|
|
135
|
-
isToggleOn: !state.isToggleOn,
|
|
136
|
+
isToggleOn: !state.isToggleOn,
|
|
136
|
-
|
|
137
|
+
namelist[this.state.flag]: Label1 ,
|
|
137
138
|
flag: this.state.flag + 1,
|
|
138
139
|
}));
|
|
139
140
|
```
|
|
141
|
+
というようなコードを書き、配列namelistの指定した場所にLabel1を入れようと思っていましたが、下記のエラーが出てしまいました。
|
|
142
|
+
```
|
|
143
|
+
./pages/index.tsx
|
|
144
|
+
Error:
|
|
145
|
+
x Unexpected token `[`. Expected ... , *, (, [, :, , ?, =, an identifier, public, protected, private, readonly, <.
|
|
146
|
+
,----
|
|
147
|
+
26 | namelist[this.state.flag]: Label1,
|
|
148
|
+
: ^
|
|
149
|
+
`----
|
|
150
|
+
|
|
151
|
+
Caused by:
|
|
152
|
+
0: failed to process input file
|
|
153
|
+
1: Syntax Error
|
|
154
|
+
```
|
|
140
|
-
|
|
155
|
+
この結果を受け、[ReactのsetStateで配列の一部を変更する](https://qiita.com/mooriii/items/1f0f74efc3060cb25ecf)を参考に配列をコピーしてから変更するというように書き換えてみて、今回のプログラムの状態になりました。
|
|
141
156
|
|
|
142
157
|
### 補足情報（FW/ツールのバージョンなど）
|
|
143
158
|
yarn 1.21.1
|
3
プログラムの記述ミス訂正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -133,8 +133,8 @@
|
|
|
133
133
|
```
|
|
134
134
|
this.setState(state => ({
|
|
135
135
|
isToggleOn: !state.isToggleOn,
|
|
136
|
-
namelist[this.state.flag]: Label3
|
|
136
|
+
namelist[this.state.flag]: Label3 ,
|
|
137
|
-
flag: this.state.flag + 1
|
|
137
|
+
flag: this.state.flag + 1,
|
|
138
138
|
}));
|
|
139
139
|
```
|
|
140
140
|
というようなコードを書いてみましたが、エラーで動かなかったため、[ReactのsetStateで配列の一部を変更する](https://qiita.com/mooriii/items/1f0f74efc3060cb25ecf)を参考に配列をコピーしてから変更するというように書き換えてみて、今回のプログラムの状態になりました。
|
2
プログラムの記述ミス
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
削除
|
|
96
96
|
</button>
|
|
97
97
|
flag = {this.state.flag} <br />
|
|
98
|
-
|
|
98
|
+
namelist_copy = {this.namenamerist_copy} <br />
|
|
99
99
|
productname[0] = {this.state.productname[0]} <br />
|
|
100
100
|
productname[1] = {this.state.productname[1]} <br />
|
|
101
101
|
productname[2] = {this.state.productname[2]} <br />
|
1
分かりにくかった記述を変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
### 前提
|
|
2
2
|
|
|
3
|
-
Next.jsでボタンを押すとそこに書かれている文字が表に入力されるシステムを作っています。
|
|
3
|
+
Next.jsでボタンを押すと、そこに書かれている文字が表に入力されるシステムを作っています。
|
|
4
4
|
複数個ボタンを配置して、押下された順番に配列の中身を変更、それを表示させようとしているのですが表示されないため困っております。
|
|
5
5
|
Typescript及びNext.Js , Reactは初学者ですので、見るに堪えない記述や的はずれなことをしているかもしれませんがどうかお付き合いください。
|
|
6
6
|
|
|
7
7
|
### 実現したいこと
|
|
8
8
|
|
|
9
|
-
配列の中身を入れ替える
|
|
9
|
+
配列namelistの中身を入れ替える
|
|
10
10
|
|
|
11
11
|
### 発生している問題・エラーメッセージ
|
|
12
12
|
何も変化が発生しない
|