【cordova-react】初期値がundefinedで警告受けた話

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