react中父子组件传函数,报错Uncaught TypeError: this.setState is not a function

17 篇文章 2 订阅
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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值