子组件中的<select>元素的onChange不会在React中重新呈现父状态,警告:未安装的组件

时间:2018-11-02 17:26:51

标签: javascript reactjs

我将状态从子级提升到父级,并尝试使用HTTP请求中的数据呈现选择元素。 Inv子组件中的选择标记值将显示以前选择的值,但是出现此错误:   警告:无法在计算机上调用setState(或forceUpdate)   未安装的组件。这是空操作,但表示内存泄漏   在您的应用程序中。要修复,请取消所有订阅并异步   componentWillUnmount方法中的任务。 看起来错误来自Inv子组件,该组件正通过this.state.identInvsData传递给道具。那是我唯一的错误。 else语句中未获得identInvsData的子组件不会获得该错误消息。父组件不会重新渲染或“装载”子组件。 关于我在做什么错的任何想法吗?   编辑:子组件正在从HTTP端点填充数据,但是onChange   仅当我选择添加Inv按钮时,才更改setState中的值。它添加了另一个孩子,但也允许以前的孩子进行更改。 身份父组件 类标识扩展了React.Component {       状态= {         invIds:[],         inTypes:[],         invSeqIds:[],         numChildren:0,         addInvBtnPressed:否       };       handleAddInv =()=> {         this.setState({           numChildren:this.state.numChildren + 1           addInvBtnPressed:true         });       };       onChangeInv =(e,index,sId)=> {         const invIdsArry = this.state.invIds;         const invSeqIdsArry = this.state.invSeqIds;         const newId = [           ... invIdsArry.slice(0,index),           (invIdsArry [index] = e.target.value),           ... invIdsArry.slice(索引+1)         ];         如果(sId){           const newSeqId = [             ... invSeqIdsArry.slice(0,index),             (invSeqIdsArry [index] = sId),             ... invSeqIdsArry.slice(索引+1)           ];           this.setState({invIds:newId,invSeqIds:newSeqId});         }其他{           this.setState({invIds:newId});         }       };       onChangeType =(e,index)=> {         const invTypesArry = this.state.invTypes;         const newTypes = [           ... invTypesArry.slice(0,index),           (invTypesArry [index] = e.target.value),           ... invTypesArry.slice(索引+1)         ];         this.setState({invTypes:newTypes});       };       render(){         const children = [];         var i;         如果(this.state.identInvsData &&!this.state.addInvBtnPressed){           对于(i = 0; i             );           }         }否则,如果(this.state.identInvsData && this.state.addInvBtnPressed){           对于(i = 0; i             );           }         }其他{           对于(i = 0; i             );           }         }         返回(           
            <按钮               type =“ button”               className =“ btn btn-info”               onClick = {this.handleAddInv}             >               添加邀请                          
{children}
          
        )     } } 导出默认身份; Inv子组件 Inv类扩展了React.Component {     状态= {       kddLookupData:“”,       invData:“”     };     componentDidMount =()=> {       kddlookups_getAll()。then(resp => {         this.setState({           kddLookupData:resp.data.item         });       });       invs_getAll()。then(resp => {         this.setState({           invData:resp.data.items         });       });     };     handleInvestigatorChange = e => {       this.props.onChangeInv(e,this.props.invKey,this.props.seqId);     };     handleInvestigatorTypeChange = e => {       this.props.onChangeType(e,this.props.invKey);     };     render(){       返回(         
          <选择             值= {this.props.invId}             名称= {this.props.invKey}             onChange = {this.handleInvChange.bind(this)}           >                          {this.state.invData &&              this.state.invData.map(inv => {                 返回(                                           {inv.invName}                                     );               })}                      <选择             值= {this.props.invType}             名称= {this.props.invKey}             onChange = {this.handleInvTypeChange.bind(this)}           >                          {this.state.kddData &&              this.state.kddData.kdd_inv_type.map(inv => {                返回(                                         {inv.inv_type_name}                                   );              })}                    
    )   } } 导出默认Inv;

1 个答案:

答案 0 :(得分:0)

在子组件的render函数中似乎没有返回任何内容。试试:

render() {
return (
   <div>
      <select
        value={this.props.invId}
        name={this.props.invKey}
        onChange={this.handleInvChange.bind(this)}
      >
        <option className="blank">Select inv name:</option>
        {this.state.invData &&
         this.state.invData.map(inv => {
            return (
               <option key={inv.userId} value={inv.userId}>
                  {inv.invName}
               </option>
            );
          })}
      </select>

      <select
        value={this.props.invType}
        name={this.props.invKey}
        onChange={this.handleInvTypeChange.bind(this)}
      >
        <option className="blank">Select inv type:</option>
        {this.state.kddData &&
         this.state.kddData.kdd_inv_type.map(inv => {
           return (
              <option key={inv.inv_type_cd} value={inv.inv_type_cd}>
                 {inv.inv_type_name}
              </option>
           );
         })}
      </select>
      </div>
   );
 }
相关问题