Question

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

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

详细了解受控制的组件in React docs

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

1 个答案: