componentDidMount()内で値を受け取る処理の途中でWarning: `value` prop on `input` should not be null.という警告を もらいました。これは、value内の値はnullで受け取ってはいけません、必ず空の状態で設定してください。 という意味になります。 componentDidmount()は、マウントされる際に一回だけ実行されます。筆者は前ページに戻った時に値を受け取る処理を作ったのですが 本来ならば空の状態でrenderされるにも関わらずその時に前ページから判別不能な値nullを既に受け取った状態で コンポーネントを生成したので警告を受けたのだと思われます。
componentDidMount() { // 前ページから受け取った値をsetStateしている const getName = window.localStorage.getItem('nameKey'); this.setState({name: getName}); }
下のコンストラクタでnameを初期化していましたが、さきほどの関数内で先行してnullの値をsetStateしてしまっているので
これでは怒られる訳ですね・・・
constructor(props) { super(props); // 画面初期表示時の状態(state)を読み込む為のキャンセル可能なプロミス(Promise)を初期化する
this.state = { name: '', } }
どうしてもコードを変えずに回避したい場合はinputタグ内でvalue = {this.state.name || ”}と書けば解決できます。
名前<input type = "text" value = {this.state.name || ''} onChange = {this.handleNameCodeChange}></input>
参考にさせていただいたサイト→https://github.com/mozilla-services/react-jsonschema-form/issues/336