Важна ли эта ошибка?Компонент неуправляемый для контролируемого

Question

Я на самом деле предпочитаю дизайн, потому что он позволяет мне легко повторно использовать компонент с состоянием реакции или состоянием редукции.Но я получаю это предупреждение.Что вы предлагаете мне сделать?

Предупреждение. Компонент изменяет неконтролируемый ввод текста типа для управления.Входные элементы не должны переключаться с неуправляемых на управляемые (или наоборот).Выберите между использованием контролируемого или неконтролируемого элемента ввода в течение срока службы компонента.Дополнительная информация: во входных данных (созданных InventoryDisplay) в InventoryDisplay (созданных Connect (InventoryDisplay)) в Connect (InventoryDisplay) в PersistGate

import React from 'react'
import {connect} from 'react-redux'
import {mapStatesToProps, mapDispatchToProps} from '../../redux/maps/maps';

class InventoryDisplay extends React.PureComponent{
    constructor(props){
        super(props)
        
        this.state={
            pagnation: true,
            firstPage: null,
            currentPage: null,
            lastPage:null,
            data:null,
            limit:null,
        }
    }

    componentDidMount(){
        //sets the value of the inventory here
        this.props.loadInventory();
    }

    componentDidUpdate(){

        console.log(this.props.CurrentInventory)
        this.setState({ 
          currentPage:this.props.CurrentInventory.current_page 
        })
        this.setState({ 
          firstPage: this.props.CurrentInventory.from 
        })
        this.setState({ 
          lastPage: this.props.CurrentInventory.last_page 
        })
        this.setState({ data: this.props.CurrentInventory.data })
        this.setState({ total: this.props.CurrentInventory.total })
        this.setState({ 
          limit: this.props.CurrentInventory.per_page 
        })
    }
 
    render(){
      return(
        <label>
          <span>Items</span>
          <input className={'text-center'} type={'text'} size={2} 
value={this.state.limit}/>
       </label>
    )
  }
}

export default connect(mapStatesToProps,mapDispatchToProps)(InventoryDisplay);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

in Provider

Answer 1

Это потому, что значение вашего ввода this.state.limit, но вы его не обновляете.Когда значение ввода изменяется, значение state не меняется.Вы должны предоставить обработчик onChange, чтобы при изменении значения внутри вашего ввода значение состояния также изменялось, повторно отображая значение внутри вашего ввода.Вы можете сделать что-то вроде <input className={'text-center'} type={'text'} size={2} onChange={this.onChangeHandler} value={this.state.limit}/>

и написать onChangeHandler, который будет выглядеть примерно так:

onChangeHandler = (e) => {
 setState({limit: e.target.value})
}

Подробнее об контролируемых компонентах в React docs