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

Question

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

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

Answer 1

こんにちは

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>

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

Comments

[moriman]

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

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

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

[jun68ykt]

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

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

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

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

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

JSXChild :
　・JSXText
　・JSXElement
　・{ JSXChildExpression opt }

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

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

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

[moriman]

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

[jun68ykt]

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

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

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

Answer 2

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

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

Comments

[moriman]

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