未捕获的类型错误：超级表达式必须为 null 或函数，而不是 undefined(...)

Posted 2023-02-22

【中文标题】未捕获的类型错误：超级表达式必须为 null 或函数，而不是 undefined(...)

【英文标题】：Uncaught TypeError: Super expression must either be null or a function, not undefined(…)

【发布时间】：2017-04-01 01:03:20

【问题描述】：

跟踪此问题的问题无法解决我的问题。

reactjs giving error Uncaught TypeError: Super expression must either be null or a function, not undefined

我的反应版本是“^15.3.1”。

我在下面添加了代码sn-p

import React from 'react';
import  ButtonInput  from 'react-bootstrap';
import Form,ValidatedInput from 'react-bootstrap-validation';

class myComponent extends React.Component 
  constructor(props) 
    super(props);
    this.handleValidSubmit = this.handleValidSubmit.bind(this);
    this.handleInvalidSubmit = this.handleInvalidSubmit.bind(this);

  
  handleValidSubmit(values)

  
  handleInvalidSubmit(errors,values)

  
  render() 
    return (
        <Form   onValidSubmit=this.handleValidSubmit
                onInvalidSubmit=this.handleInvalidSubmit>

                <ValidatedInput
                    type='text'
                    label='Email'
                    name='email'
                    validate='required,isEmail'
                    errorHelp=
                        required: 'Please enter your email',
                        isEmail: 'Email is invalid'
                    
                />

                <ValidatedInput
                    type='password'
                    name='password'
                    label='Password'
                    validate='required,isLength:6:60'
                    errorHelp=
                        required: 'Please specify a password',
                        isLength: 'Password must be at least 6 characters'
                    
                />

                <ValidatedInput
                    type='password'
                    name='password-confirm'
                    label='Confirm Password'
                    validate=(val, context) => val === context.password
                    errorHelp='Passwords do not match'
                />


                <ValidatedInput
                    type='checkbox'
                    name='agree'
                    label='I agree to the terms and conditions'
                    validate='isChecked'
                />

                 <ButtonInput
                    type='submit'
                    bsSize='large'
                    bsStyle='primary'
                    value='Register'
                />

            </Form>
    );
  


module.exports = myComponent;

【问题讨论】：

没有“Form”组件导入

从 'react-bootstrap-validation' 导入 Form,ValidatedInput;

抱歉，我知道了。尝试在你的类声明之前做一些类似 console.log(ButtonInput) 的事情。看起来您的导入路径不正确。

还有，this.handleValidSubmit = this.handleValidSubmit.bind(this);是什么

@degr 这是将正确的this 绑定到函数以供以后使用的常用方法。

【参考方案1】：

似乎与react-bootstrap 版本有冲突>= 0.30。

降级您的react-boostrap 版本以兼容react-bootstrap-validation 可能会起作用。

官方问题线程是here。在作者发布更新以解决此兼容性问题之前，您可能需要降级您的 react-bootstrap 版本，即使它不是最理想的“解决方案”。