我将状态从子级提升到父级,并尝试使用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 => {
返回(
);
})}
<选择
值= {this.props.invType}
名称= {this.props.invKey}
onChange = {this.handleInvTypeChange.bind(this)}
>
{this.state.kddData &&
this.state.kddData.kdd_inv_type.map(inv => {
返回(
);
})}
)
}
}
导出默认Inv;