javascript - 这个错误重要吗？组件不受控制到受控

Question

我实际上更喜欢这种设计，因为它允许我通过 React state 或 redux state 轻松地重用组件。但是我收到了这个警告。你建议我做什么？

Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: in input (created by InventoryDisplay) in InventoryDisplay (created by Connect(InventoryDisplay)) in Connect(InventoryDisplay) in 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但你没有更新它。当input的值改变时，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})
}

阅读更多关于受控组件的信息 in React docs