Uncaught TypeError: this.setState is not a function
at Object.huoqu (config.jsx?755c:128)
at Object.huoqu (react-hot-loader.development.js?6f2c:693)
at ProxyComponent.eval (cronexpression1.jsx?f7c8:22)
at callCallback (react-dom.development.js?054f:11312)
at commitUpdateEffects (react-dom.development.js?054f:11351)
at commitUpdateQueue (react-dom.development.js?054f:11339)
at commitLifeCycles (react-dom.development.js?054f:16257)
at commitAllLifeCycles (react-dom.development.js?054f:17592)
at HTMLUnknownElement.callCallback (react-dom.development.js?054f:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js?054f:199)
huoqu @ config.jsx?755c:128
_loadModule @ react-hot-loader.development.js?6f2c:693
(anonymous) @ cronexpression1.jsx?f7c8:22
callCallback @ react-dom.development.js?054f:11312
commitUpdateEffects @ react-dom.development.js?054f:11351
commitUpdateQueue @ react-dom.development.js?054f:11339
commitLifeCycles @ react-dom.development.js?054f:16257
commitAllLifeCycles @ react-dom.development.js?054f:17592
callCallback @ react-dom.development.js?054f:149
invokeGuardedCallbackDev @ react-dom.development.js?054f:199
invokeGuardedCallback @ react-dom.development.js?054f:256
commitRoot @ react-dom.development.js?054f:17788
completeRoot @ react-dom.development.js?054f:19240
performWorkOnRoot @ react-dom.development.js?054f:19169
performWork @ react-dom.development.js?054f:19077
flushInteractiveUpdates$1 @ react-dom.development.js?054f:19328
batchedUpdates @ react-dom.development.js?054f:2162
dispatchEvent @ react-dom.development.js?054f:4903
interactiveUpdates$1 @ react-dom.development.js?054f:19315
interactiveUpdates @ react-dom.development.js?054f:2169
dispatchInteractiveEvent @ react-dom.development.js?054f:4880
react-dom.development.js?054f:16013 The above error occurred in the <CronExpre> component:
in CronExpre (created by SettingConfig)
in div (created by Dialog)
in div (created by Dialog)
in div (created by LazyRenderBox)
in LazyRenderBox (created by Dialog)
in AnimateChild (created by Animate)
in Animate (created by Dialog)
in div (created by Dialog)
in div (created by Dialog)
in Dialog (created by DialogWrap)
出现原因是this的绑定不对,如果是子组件向父组件传值,定义的函数需要在子组件中调用,然后,在父组件中重新赋值的时候,一定注意this的指向问题
实例:
父组件
huoqu={this.huoqu},向子组件传函数,让子组件调用
出现这个报错的原因是:
huoqu(msg){ //这获取的是子组件的值,如果想要修改state的值,需要绑定在父组件的上面,所以我改成箭头函数,就可以正常运行了
console.log(msg)
}
constructor(props) {
super(props);
this.state = {
data: '',
num: 0
};
}
huoqu =(value)=> { //获取从子组件来的值
// console.log('value shi'+value)
this.setState({
data: value
});
}
render() {
return (
<Child value={this.state.num} huoqu={this.huoqu}/>
)
}
子组件:
通过this,props.huoqu 调用父组件的事件,把data数据传输过去
export default class Child extends React.Component {
constructor(props) {
super(props);
this.state = {
num: {},
data: ""
};
}
change= event => {
this.setState({
data: event.target.value
},function(){
this.props.huoqu(this.state.data)
});
};
render() {
return (
<React.Fragment>
<p>
<Input onChange={this.change} addonBefore="数据为:" defaultValue={this.props.value} />
</p>
</React.Fragment>
);
}
}
如果父子组件还不太理解怎么传参,可以看这个:
https://segmentfault.com/q/1010000007295553?_ea=1300560
来源:CSDN
作者:zoepriselife316
链接:https://blog.csdn.net/zoepriselife316/article/details/93717312