reactjs - 反应警告：包含隐藏类型的输入，带有值和默认值 - 如何修复？

Question

我是 React 的新手（一周前才开始使用它），我没有必要的知识来解决这个警告。我有 2 组选择框 (materialUI) - 所以总共有 4 个选择框。第一组选择框始终显示。有条件地显示第二组选择框 - 如果在原始选择框中的第二个选择（countrySelection 选择框）中选择了“巴西”，则会显示下第二组隐藏的选择框，但我收到警告（已发布在代码下方）关于受控和不受控的输入元素。

//these are the event handler functions
        handleCategorySwitch = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    this.setState({ [name]: value});

    console.log(`name ${name}, value ${value}`);
}


//this is the sub-selection
handleSubselection = (e) => {
    this.setState({RptSecondInput: e.target.value, isLoading: true })
    switch( e.target.value) {
        case 'input3':
        return  this.props.GetAllCountries()
    }

}

//this calls the reducer function ReportGetAllCountries
handleReportSwitch = (e) => {
    let selectedName = e.target.name
    const selectedValue = e.target.value;
this.setState({[selectedName]:selectedValue })
    if (selectedValue == 'USA') {
        this.setState(prevState => ({
            report: 'states',
            isLoading: true
        }), this.props.ReportGetAllCountries)
    }   

   //if selected value is Brazil, the countries report is set
    if (selectedValue == 'Brazil') {
        this.setState(prevState => ({
            report: 'countries'
        }))

       }
     }





      const {filename, isLoading, countries, stateSelection, 
        countrySelection, 
       isReportSelected, RptFirstInput, RptSecondInput} = this.state;

    return (
       <div className="reports">
            {this.placeholder()}

            <div className="selectInputRow flexMode">
                <div className="selectInput">
                    <InputLabel htmlFor="stateSelection">Category: 
         </InputLabel>
            //I have two sets of select boxes - these are the first two
                    <Select value={stateSelection} name={'stateSelection'} 
           onChange={(e) => this.handleCategorySwitch(e)} 
            className="fixedWidth">

                        <MenuItem value={'None'} >Select Category</MenuItem>
                        <MenuItem value={'State1'}>Cat 1</MenuItem>
                        <MenuItem value={'State2'}>Cat 2 </MenuItem>
                        <MenuItem value={'State3'}>Cat 3 </MenuItem>
                    </Select>
                </div>
                <div className="selectInput">
                    <InputLabel htmlFor="countrySelection">Report Name: 
             </InputLabel>
              //the warning happens when I select 'Brazil' in this select 
                 box
                    <Select value={countrySelection} name="countrySelection" 
              onChange={(e) => this.handleReportSwitch(e)} 
                className="fixedWidth" >
                        <MenuItem value={'None'}>Select Report</MenuItem>
                        {reports && reports.map((report, index) => <MenuItem 
              key={index} value={report.actOn}>{report.name}</MenuItem>)}   
                    </Select>
                </div>
            </div>

            { this.state.report === 'countries' ?  (
                <div className="selectInputRow">

                <div className="selectInput">
                    <InputLabel htmlFor="RptFirstInput">Input 1: 
                    </InputLabel>

                    <Select name="RptFirstInput" value={RptFirstInput} 
                  placeholder={'Select field'}  className="fixedWidth"   
                    // onChange={(e) => this.handleSubselection(e)}
                    >
                        <MenuItem value={'Default'}>Select</MenuItem>
                        <MenuItem value={'Country'}>Country</MenuItem>
                        <MenuItem value={'Region'}>Region</MenuItem>
                        <MenuItem value={'Zone'}>Zone</MenuItem>
                    </Select>

                </div>
                <div className="selectInput">
                    <InputLabel htmlFor="RptSecondInput">Input 2: 
                      </InputLabel>

                    <Select name="RptSecondInput" defaultValue= 
                     {RptSecondInput} value={RptSecondInput}  
          className="fixedWidth"   onChange={(e) => 
                 this.handleSubselection(e)}>
                        <MenuItem value={'Def'}>Select</MenuItem>
                        <MenuItem value={'input2'}>Input 2</MenuItem>
                        <MenuItem value={'input3'}>Input 3</MenuItem>
                        <MenuItem value={'input4'}>Input 4</MenuItem>
                    </Select>

                </div>
            </div>
            ) : null}


            <div className="iconDownload">


                {isLoading
                ? <CircularProgress /> 
                : (
                    <Table id="t1">
                        <TableHeaders data={this.csvHeader()} />
                        <TableContent data={this.csvData()} />
                    </Table>
                )}

            </div>
        </div>
        )
       }

我得到的警告如下：

    Warning: ForwardRef(SelectInput) contains an input of type hidden with 
    both value and defaultValue props. Input elements must be either 
    controlled or uncontrolled (specify either the value prop, or the 
    defaultValue prop, but not both). Decide between using a controlled or 
    uncontrolled input element and remove one of these props. More info: 
    https:fb.  me react-controlled-components
    in input (created by ForwardRef(SelectInput))
     in ForwardRef(SelectInput) (created by ForwardRef(InputBase))

标签： reactjsreact-redux

Answer 1

您的问题在此输入中：

<Select 
  name="RptSecondInput" 
  defaultValue={RptSecondInput} 
  value={RptSecondInput}  
  className="fixedWidth"   
  onChange={(e) => this.handleSubselection(e)}>
    <MenuItem value={'Def'}>Select</MenuItem>
    <MenuItem value={'input2'}>Input 2</MenuItem>
    <MenuItem value={'input3'}>Input 3</MenuItem>
    <MenuItem value={'input4'}>Input 4</MenuItem>
</Select>

卸下defaultValue支柱。