前提
Next.jsでボタンを押すと、そこに書かれている文字が表に入力されるシステムを作っています。
複数個ボタンを配置して、押下された順番に配列の中身を変更、それを表示させようとしているのですが表示されないため困っております。
Typescript及びNext.Js , Reactは初学者ですので、見るに堪えない記述や的はずれなことをしているかもしれませんがどうかお付き合いください。
実現したいこと
配列namelistの中身を入れ替える
発生している問題・エラーメッセージ
何も変化が発生しない
該当のソースコード
Typescript
1import Head from 'next/head' 2import Link from 'next/link' 3import styles from '../styles/Home.module.css' 4import { Component, MouseEvent } from 'react'; 5import React from 'react'; 6import { throws } from 'assert'; 7 8const Title = "表"; 9const Label1 = "name1"; 10const Label2 = "name2"; 11const Label3 = "name3"; 12 13class Toggle extends Component { 14 constructor(props) { 15 super(props); 16 this.state = { 17 isToggleOn: true, 18 flag: 0, 19 namelist: ['', '', ''], 20 }; 21 } 22 23 nameClick_1 = () => { 24 this.setState(state => ({ 25 isToggleOn: !state.isToggleOn, 26 flag: this.state.flag + 1, 27 })); 28 29 const namelist_copy = this.state.namelist.slice(); 30 namelist_copy[this.state.flag-1] = Label1 ; 31 this.setState({namelist: namelist_copy}) 32 } 33 34 nameClick_2 = () => { 35 this.setState(state => ({ 36 isToggleOn: !state.isToggleOn, 37 flag: this.state.flag + 1, 38 })); 39 40 const namelist_copy = this.state.namelist.slice(); 41 namelist_copy[this.state.flag-1] = Label2 ; 42 this.setState({namelist: namelist_copy}) 43 } 44 45 nameClick_3 = () => { 46 this.setState(state => ({ 47 isToggleOn: !state.isToggleOn, 48 flag: this.state.flag + 1, 49 })); 50 51 const nameliest_copy = this.state.namelist.slice(0); 52 namelist_copy[this.state.flag] = Label3 ; 53 this.setState({namelist: namelist_copy}) 54 } 55 56 delateClick = () => { 57 this.setState(state => ({ 58 isToggleOn: !state.isToggleOn, 59 flag: 0, 60 namelist: "", 61 })); 62 alert("delate"); 63 } 64 65 render() { 66 return ( 67 <> 68 69 <button onClick={this.productClick_1}> 70 {Label1} 71 </button> 72 <button onClick={this.productClick_2}> 73 {Label2} 74 </button> 75 <button onClick={this.productClick_3}> 76 {Label3} 77 </button> 78 <button onClick={this.delateClick}> 79 削除 80 </button> 81 flag = {this.state.flag} <br /> 82 namelist_copy = {this.namenamerist_copy} <br /> 83 productname[0] = {this.state.productname[0]} <br /> 84 productname[1] = {this.state.productname[1]} <br /> 85 productname[2] = {this.state.productname[2]} <br /> 86 <table border={2}> 87 <tr> 88 <th className={styles.table_th}>{Title}</th> 89 </tr> 90 <tr> 91 <td className={styles.table_td}>{this.state.flag >= 1 ? this.state.namelist[0] : ""}</td> 92 </tr> 93 <tr> 94 <td className={styles.table_td}>{this.state.flag >= 2 ? this.state.namelist[1] : ""}</td> 95 </tr> 96 <tr> 97 <td className={styles.table_td}>{this.state.flag >= 3 ? this.state.namelist[2] : ""}</td> 98 </tr> 99 </table> 100 </> 101 102 ); 103 } 104} 105 106export default Toggle;
試したこと
当該ソースコード内にもあるボタンがクリックされた際に動作する関数
this.setState(state => ({ isToggleOn: !state.isToggleOn, flag: this.state.flag + 1, }));
のプログラム内部で
this.setState(state => ({ isToggleOn: !state.isToggleOn, namelist[this.state.flag]: Label1 , flag: this.state.flag + 1, }));
というようなコードを書き、配列namelistの指定した場所にLabel1を入れようと思っていましたが、下記のエラーが出てしまいました。
./pages/index.tsx Error: x Unexpected token `[`. Expected ... , *, (, [, :, , ?, =, an identifier, public, protected, private, readonly, <. ,---- 26 | namelist[this.state.flag]: Label1, : ^ `---- Caused by: 0: failed to process input file 1: Syntax Error
この結果を受け、ReactのsetStateで配列の一部を変更するを参考に配列をコピーしてから変更するというように書き換えてみて、今回のプログラムの状態になりました。
補足情報(FW/ツールのバージョンなど)
yarn 1.21.1
node 16.14.0
next.js 13.0.2
react 18.2.0
回答1件
あなたの回答
tips
プレビュー