Javascript React HOC,;关于ref,;我同意';更新状态时无法获取实例

Javascript React HOC,;关于ref,;我同意';更新状态时无法获取实例,javascript,reactjs,components,higher-order-components,Javascript,Reactjs,Components,Higher Order Components,我有一个演示。在HOC中。 它将做两件事:处理状态并使用refs来处理MyComponent的实例 当状态改变时,我会遇到一个问题 在proc函数中:实例将记录两次,值为null和mycompentinstance。值null是错误的值,但我不知道为什么proc函数日志中的实例。为什么实例为null?你能告诉我为什么吗 从“React”导入React; 从“react dom”导入react dom; //这是一个特别的问题。 //已管理状态:名称 //还有!!我有一个函数:proc,将获得M

我有一个演示。在HOC中。
它将做两件事:处理状态并使用
refs
来处理
MyComponent
的实例

当状态改变时,我会遇到一个问题
proc
函数中:
实例将记录两次,值为
null
mycompentinstance
。值
null
是错误的值,但我不知道为什么
proc
函数日志中的
实例
。为什么
实例
null
?你能告诉我为什么吗

从“React”导入React;
从“react dom”导入react dom;
//这是一个特别的问题。
//已管理状态:名称
//还有!!我有一个函数:proc,将获得MyComponent实例
常量MyContainer=(WrappedComponent)=>{
返回类扩展了React.Component{
建造师(道具){
超级(道具)
此.state={
姓名:“
}
this.onNameChange=this.onNameChange.bind(this)
}
onNameChange(事件){
这是我的国家({
名称:event.target.value
})
}
过程(实例){
console.log(instance);//当状态更改时,这将处理两次。该实例将有两个值:null和MyComponent
instance&&instance.test()
}
渲染(){
const newProps=Object.assign({
文本:“新文本”,
姓名:{
值:this.state.name,
onChange:this.onNameChange
}
},this.props,{ref:this.proc.bind(this)})
返回(
)
}
}
}
@霉菌容器
类MyComponent扩展了React.Component{
测试(){
控制台日志(123);
}
渲染(){
返回(
{this.props.text}
)
}
}
ReactDOM.render(
123,
document.getElementById('root'))
)