react.jsでのフォーム(Comtroled Component)の入力値のstateへのセットについて

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 88

moriman

score 25

import React, { Component } from 'react';

export default class MyEvent extends Component {
    construct(props){
            this.state = {
                  data: 'aaa'
            };
    }

      onchange(e) {

        let name=e.target.name;
        let value=e.target.value;
            this.setState({[name]:value});
      }

    render() {
            return (
            <div>
                <p>testtttttteee</p>

                  <form>
                    <label htmlFor="data">名前:</label>
                    <input name="data" type="text" onChange={(e)=>this.onchange(e)} value={this.state.data}/>
                <p>{this.state}</p>
                  </form>

            </div>
            );
      }
}
import React from 'react';

import './App.css';
import NumberOfGames from './NumberOfGames';
import PrintBasicInfo from './PrintBasicInfo';
import MyEvent from './MyEvent';
import MyState_2 from './MyState_2';
import MyParent from './MyParent';
import NameForm from './NameForm';
import FlavorForm from './FlavorForm';
import Calculator from './Calculator';





class App extends React.Component {

        constructor(props){
            super(props);



            this.state={

                place    :    ""

            }

        }

        handleClickNOG(e){
{/*
            let name=e.target.name;
            let value=e.target.value;

            this.setState({[name]:value});
*/}
            let value=e.target.value;
            this.setState({place:value});


        }



        componentDidUpdate(prevProps,prevState){
            console.log(`${this.state.place}です`);
        }



render(){  
  return (
    <div>
    <MyEvent greet="helohelo" />
    </div>
  );
}
}

export default App;


reactの練習でフォームについていろいろいじってるのですが、上記のコードについて。
現在の認識では上記コードで入力ボックスの入力値がstate.dataにセットされて、現在のstate.dataの値が入力ボックス内に表示される挙動でエラーは出ないと思うのですが、実際動かしてみると、

 The above error occurred in the <MyEvent> component:
    in MyEvent (at App.js:56)
    in div (at App.js:55)
    in App (at src/index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
1.chunk.js (33089,11)

 SCRIPT5007: SCRIPT5007: Unable to get property 'data' of undefined or null reference


上記のエラーが出ます。原因がわかりません。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

こんにちは

MyEventのコードで、下記の(1), (2) の2カ所が要修正かなと思われます。
  

(1) コンストラクター

修正前:

construct(props){
  this.state = {
    data: 'aaa'
  };
}
  • constructorを、 construct と書いている。
  • super(props)を呼んでいない。

修正後:

constructor(props){
  super(props);
  this.state = {
    data: 'aaa'
  };
}

(2) render で返すJSXの中に {this.state} と書かれているところ

修正前:

<p>{this.state}</p>
  • 上記のままだと Objects are not valid as a React child のエラーになるので要修正。this.state の内容を表示させたいのであれば、たとえば JSON の文字列にする。

修正後:

<p>{JSON.stringify(this.state)}</p>

以上、参考になれば幸いです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/09 11:24

    回答を戴きましてありがとうございます。
    戴いた指摘部分の修正で動きました。
    基本的なミスで情けない思いです。

    (2)のエラーなんですが、これって公式ドキュメントで説明されている部分はあるでしょうか?

    いつもありがとうございます。

    キャンセル

  • 2019/09/09 12:19

    コメントありがとうございます。

    > (2)のエラーなんですが、これって公式ドキュメントで説明されている部分はあるでしょうか?

    少し検索してみましたが、React の
    > 公式ドキュメント
    https://reactjs.org/
    には、このエラーについての詳しい説明は見つからないのですが、facebook の JSXのレポジトリ

    https://facebook.github.io/jsx/

    に、JSXの構文定義が書かれており、ここに

    JSXChild :
     ・JSXText
     ・JSXElement
     ・{ JSXChildExpression opt }

    と書かれています。
    なので、

    <p>{this.state}</p>

    と書くと {this.state} の部分がどれにも当てはまらないので、エラーになるという理解で(とり急ぎ)よいかと思います。

    キャンセル

  • 2019/09/11 10:16

    わかりました。ありがとうございました。

    キャンセル

  • 2019/09/11 18:25

    どういたしまして。
    ちなみに先のコメントにあった、

    > これって公式ドキュメントで説明されている部分はあるでしょうか?

    という疑問(=公式ではどこに書いてある?)を持つことは、とても良いと思います。

    キャンセル

0

render() {
    conosle.log(this.state); // state に何がはいっているか調べる
    console.trace(); // どこから呼び出されているか調べる
    return (
        <div>
            <p>testtttttteee</p>
//...

のようにして、 render が実行される際の呼び出し元と、その時の state を表示してデバッグしてみると原因はわかるかと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/09 11:25

    回答を戴きましてありがとうございました。
    デバッグの方法について調べてみようと思います。

    キャンセル

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

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る