リアクション警告：「制御されない非表示の入力を変更しています」なぜですか？

Question

この警告の修正方法がわかりません。これは、警告を送信するコンポーネントです。

警告：ReporteBoxMapRasterは、制御されない非表示の入力の入力を変更しています。入力要素は、制御されていない状態から制御された状態に切り替わるべきではありません（またはその逆）。コンポーネントの寿命の間、制御された入力要素または制御されていない入力要素を使用するかどうかを決めます。さらに詳しい情報：HTT FB sitereact制御コンポーネント

var ReporteBoxMapRaster = React.createClass({ 
    print: function(){ 
     $(ReactDOM.findDOMNode(this.refs.print_form)).submit(); 
    }, 

    render: function() { 
     if(this.props.extent){ 
      var legend = null; 
      switch(this.props.legend){ 
       case 'solid': 
        legend = <ReporteLegendSolid values={ this.props.values } />; 
       break; 
       case 'gradient': 
        legend = <ReporteLegendGradient values={ this.props.values } />; 
       break; 
      } 

      if(this.props.extra) 
       var extra = this.props.extra; 
      else 
       var extra = ''; 

      var extent = this.props.extent; 
      var url = 'http://XXX.XXX.XXX/cgi-bin/mapserv?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&'; 
      url += 'LAYERS='+ this.props.layer +'&'; 
      url += 'map=/opt/mapfile/reporte/'+ this.props.mapfile +'.map&'; 
      url += 'TILED=false&WIDTH=780&HEIGHT=440&STYLES=&'; 
      url += 'CRS=EPSG:' + this.props.epsg + '&'; 
      url += 'BBOX=' + extent[0] + ',' + extent[1] + ',' + extent[2] + ',' + extent[3]; 
      url += extra; 

      return (
       <div className="uk-width-large-2-2 reporte-box reporte-box-target" > 
        <div className="md-card md-card-hover md-card-overlay " > 
         <div className="md-card-toolbar full2"> 
          <div className="md-card-toolbar-actions"> 
           <Full_screem_inter /> 
           <span onClick={this.print} ><i className="md-icon material-icons md-card-overlay-toggler" >print</i></span> 
          </div> 
          <h3 className="md-card-toolbar-heading-text">{ this.props.title }</h3> 
         </div> 
         <div className="md-card-content uk-text-center" > 
          <div className="" > 
           <div className="map-container" > 
            <img className="mapimage" ref="mapImageBG" src={ this.props.bgimage } /> 
            <img className="mapimage" ref="mapimageWMS" src={ url } /> 
           </div> 
          </div> 

          <div className="reporte-onlyonfull"> 
           Leyenda 
          </div> 
          <div> 
           { legend } 
          </div> 

          <div className="reporte-onlyonfull"> 
           <div> 
           </div> 
          </div> 
         </div> 
         <div className="md-card-footer" ></div> 
        </div> 

        <form ref="print_form" action={ Routing.generate("exportmaptopdf") } method="post" target="_blank" className="hidden" > 
         <input name="legend" type="hidden" value={JSON.stringify(this.props.values)} /> 
         <input name="legendType" type="hidden" value={this.props.legend} /> 
         <input name="title" type="hidden" value={this.props.title} /> 
         <input name="bgsrc" type="hidden" value={this.props.bgimage} /> 
         <input name="src" type="hidden" value={ encodeURI(url) } /> 
        </form> 
       </div> 
      ); 
     } 
     else 
      return (<div></div>); 
    } 
}); 
module.exports = ReporteBoxMapRaster; 

Answer 1

あなたがそのコードスニペットに向上させることができますので、多くのものがある。）が、あなたの質問に答える：あなたが入力するundefined値を設定するたびに

をその警告が表示されます。警告を除去するために、undefinedを設定しないようにし、代わりに空の文字列

class Inputs extends React.Component { 

    componentWillMount() { 
    this.setState({ 
     // value: '', // <---- this doesn't show the warning!! 
     value: undefined, // <---- Undefined value, you get the warning :o 
    }); 
    } 

    setValue(event) { 
    this.setState({ 
     value: event.target.value, 
    }); 
    } 

    render() { 
    return (
     <div> 
     <input 
      type="text" 
      onChange={(event) => this.setValue(event)} 
      value={this.state.value} 
     /> 
     </div> 
    ); 
    } 
} 

ここで働い例です''設定：あなたの場合、this.props.titleにhttp://jsbin.com/sizaxaf/1/edit?html,js,output

するか、値が定義されていない他の小道具のいずれか、あなたは警告を受け取ります。 defaultPropsを使用すると、小道具が定義されていないときに値を設定できます（空の文字列など）。

class Inputs extends React.Component { 
    static defaultProps = { 
    title: '', 
    } 

    //... 
}