Предупреждение о реакции: содержит ввод скрытого типа со значением и значением по умолчанию - как это исправить?

Question

Я новичок в React (начал использовать его всего неделю назад), и у меня нет необходимых знаний, чтобы понять это предупреждение. У меня есть 2 набора блоков выбора (materialUI) - всего 4 блока выбора. Первый набор полей выбора отображается постоянно. Второй набор блоков выбора отображается ОБЯЗАТЕЛЬНО - если «Бразилия» выбрана во втором блоке выбора (поле выбора страны) в исходном наборе блоков выбора, отображается следующий второй набор скрытых блоков выбора, но я получаю предупреждение (опубликованониже кода) об управляемых и неконтролируемых элементах ввода.

//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))

Answer 1

Входы должны быть либо управляемыми, либо неуправляемыми . Указание defaultValue опоры превращает ваш вход в контролируемый и неконтролируемый одновременно (в этом состоянии есть два источника правды). Чтобы указать значение по умолчанию для управляемого входа, вы должны определить его как начальное значение состояния, в котором находится вход.

const Component = () =>{
    const [value, setValue] = useState('default')

    return <input value={value} onChange={e => setValue(e.target.value)} />
} 

Answer 2

Документация React содержит несколько полезных сведений о Контролируемые компоненты (эта ссылка специально предназначена для форм) и Неконтролируемые компоненты .

Короче говоря, путем установкиvalue реквизит input, вы «управляете» компонентом - его значение не зависит от ввода пользователя, а вместо этого от значения value реквизита. Контролируемому компоненту обычно требуется прослушиватель событий, например onChange, который обновит значение value prop.

Если вместо этого вы предпочитаете, чтобы значение ввода определялось пользовательским вводом без использования события («неуправляемый» компонент), но вы хотите указать начальное значение, React предлагает defaultValueдвигательныйЭто первоначально установит value ввода, но пользовательский ввод изменит значение напрямую.

Answer 3

Ваша проблема во входных данных:

<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 проп.