這個錯誤重要嗎？ 組件不受控制到受控

Question

我實際上更喜歡這種設計，因為它使我可以輕松地以React狀態或Redux狀態重用組件。 但是我得到這個警告。 你建議我做什么？

警告：組件正在更改要控制的文本類型的不受控制的輸入。 輸入元素不應從不受控制切換為受控制（反之亦然）。 確定在組件的使用壽命期間使用受控或不受控制的輸入元素。 更多信息：在PersistGate的Connect（InventoryDisplay）中的InventoryDisplay（由Connect（InventoryDisplay）創建）中的輸入（由InventoryDisplay創建）

 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文檔中閱讀更多有關受控組件網絡的信息