質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

472閲覧

setStateで配列の中身を変更したい

h_al

総合スコア3

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/11/04 06:20

編集2022/11/09 14:51

前提

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2022/11/04 06:48

> というようなコードを書いてみましたが、エラーで動かなかったため、 どのようなエラーがどこで出力されたのかご提示ください。
h_al

2022/11/04 06:56

失礼いたしました。エラーとしては ./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 といった内容になります。
hoshi-takanori

2022/11/07 17:00

エラーメッセージと質問文中のコードが一致しませんけど…。
guest

回答1

0

自己解決

setStateではなくuseStateを使うことで問題が解決されました。
以下、修正後のコードです。

TypeScript

1import styles from '../styles/Home.module.css' 2import React, {useState} from 'react'; 3import { throws } from 'assert'; 4 5const Title = "表"; 6const Label1 = "name1"; 7const Label2 = "name2"; 8const Label3 = "name3"; 9 10export default function App() { 11 const initialState = []; 12 const [namelist, setNamelist] = useState(initialState); 13 const [flag, setFlag] = useState(0); 14 15 const nameClick_1 = () => { 16 setFlag(flag + 1); 17 setNamelist([...namelist, Label1]); 18 } 19 20 nameClick_2 = () => { 21 setFlag(flag + 1); 22 setNamelist([...namelist, Label2]); 23 } 24 25 nameClick_3 = () => { 26 setFlag(flag + 1); 27 setNamelist([...namelist, Label3]); 28 } 29 30 deleteClick = () => { 31 setFlag(0); 32 setNamelist ([]); 33 alert("delete"); 34 } 35 36 return ( 37 <> 38 39 <button onClick={this.productClick_1}> 40 {Label1} 41 </button> 42 <button onClick={this.productClick_2}> 43 {Label2} 44 </button> 45 <button onClick={this.productClick_3}> 46 {Label3} 47 </button> 48 <button onClick={this.deleteClick}> 49 削除 50 </button> 51 <table border={2}> 52 <tr> 53 <th className={styles.table_th}>{Title}</th> 54 </tr> 55 <tr> 56 <td className={styles.table_td}>{this.state.flag >= 1 ? namelist[0] : ""}</td> 57 </tr> 58 <tr> 59 <td className={styles.table_td}>{this.state.flag >= 2 ? namelist[1] : ""}</td> 60 </tr> 61 <tr> 62 <td className={styles.table_td}>{this.state.flag >= 3 ? namelist[2] : ""}</td> 63 </tr> 64 </table> 65 </> 66 67 ); 68 }

投稿2022/11/09 04:46

編集2022/11/09 05:51
h_al

総合スコア3

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問