这个错误重要吗？不受控到受控的组件答案

【问题标题】：Is this error Important? Component uncontrolled to controlled这个错误重要吗？不受控到受控的组件
【发布时间】：2018-05-22 15:59:35
【问题描述】：

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

警告：组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控切换到受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。更多信息：在输入中（由 InventoryDisplay 创建）在 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

【问题讨论】：

标签： javascript reactjs redux

【解决方案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

【讨论】：