reactjs - react 警告 : "is changing an uncontrolled input of type hidden to be controlled" why?

Question

我不知道如何解决这个警告。这是发送警告的组件:

警告:ReporteBoxMapRaster 正在将隐藏类型的不受控制输入更改为受控制。输入元素不应从不受控制切换到受控制(反之亦然)。在组件的生命周期内决定使用受控或非受控输入元件。更多信息:htt fb sitereact-control-components

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 而是设置一个空字符串 ''

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>
    );
  }
}

这是一个工作示例:http://jsbin.com/sizaxaf/1/edit?html,js,output

在您的情况下，this.props.title或任何其他 Prop 的值未定义，因此您会收到警告。当 prop 未定义时(例如空字符串)，您可以使用 defaultProps 设置一个值。

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

  //...
}