javascript - ReactJS 这个 Prop 不是一个函数

Question

我知道这个问题被问了很多，因为我已经完成了谷歌的前两页并且我已经在 SO 上搜索过它但是我没有找到适合我的解决方案而且我不知道为什么我会收到这个错误。

这是我的父组件

class App extends Component {
    state = { lang: language }

    constructor(props) {
        super(props)
        this.handleLanguage = this.handleLanguage.bind(this)
      }

      handleLanguage(langValue){
        this.setState({lang: langValue});
    }

    render() {
        return (
            <IntlProvider locale={this.lang} messages={messages}>
                <div className="App">
                    <div className="App-content">
                        <React.Fragment>
                            <div className="menu">
                                <Navbar handleLanguage={this.handleLanguage}></Navbar>
                            </div>
                            <Main />
                        </React.Fragment>
                    </div>
                </div>
            </IntlProvider>

        );
    }
}

export default (App);

这是我的 child 组件

export class Navbar extends React.Component {
    constructor() {
        super();
        this.langChange = this.langChange.bind(this)
    }

    langChange(value){
        var lang = value;
        this.props.handleLanguage(lang);            
    }


    render() {
        return (
            <nav className="navbar navbar-expand-lg nav-bar-bg">
                <a href="/">
                    <img src={Logo_horizontal_flat} className="logo-horizontal-flat"></img>
                </a>
                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <div className="navbar-nav">
                        <a className="nav-item nav-link" onClick={() => this.langChange("fr")}><img className="flag" src={flag_fr}></img></a>
                        <a className="nav-item nav-link" onClick={() => this.langChange("en")}><img className="flag" src={flag_us}></img></a>
                    </div>
                </div>
            </nav>
        )
    }
}

我遇到了这个错误

× TypeError: this.props.handleLanguage is not a function

我正在尝试通过以下问题将数据从他的 child 传递给 parent : How to pass data from child component to its parent in ReactJS?

但我不知道为什么我仍然会遇到这个错误，我什至尝试像这样使用 PropTypes 键入我的 Prop

Navbar.propTypes = {
    handleLanguage: PropTypes.func
};

但它并没有改变任何东西......

编辑

实际上，当我删除我的 Main 组件时它正在工作，这是我的路由组件

export class Main extends React.Component {

    render (){
        return (
            <Switch>
                <Route exact path="/" component={Home}></Route>
                <Route path='/signup' component={RegisterPart2} ></Route>
                <Route path='/signup1' component={RegisterPart1} ></Route>
                <Route path='/signup2' component={RegisterPart3} ></Route>
                <Route path='/login' component={Login} ></Route>
                <Route path='/profile' component={Profile} ></Route>
                <Route path='/information' component={Information} ></Route>                
                <Route path='/account' component={Account} ></Route> 
                <Route path='/address' component={Adresses} ></Route>                
                <Route path='/addadress' component={Addadresses} ></Route>                
                <Route path='/countries' component={Countries} ></Route>                
            </Switch>
        );
    }
}

我不知道这个组件如何影响它，知道吗？

编辑 2

最后我得到了答案，这是因为在我的 Home 组件中我再次调用了 Navbar 组件。

谢谢大家的帮助

预先感谢您的帮助

Answer 1

我假设您在这里看到的是将状态从子组件传递到 Prop 。假设您希望保留子组件的函数名称，如下所示:onClick={() => this.langChange("fr")} ，然后在您的父组件上您需要更改:

 handleLanguage(langValue){
        this.setState({lang: langValue});
    }

与:

 langChange(langValue){
        this.setState({lang: langValue});
    }

和<Navbar handleLanguage={langValue=>this.langChange(langValue)}></Navbar>

一些改进代码的建议。您正在使用状态而不是 this.state。如果你决定使用构造函数和 super with props 你必须做这样的事情:

 constructor(props){
    super(props);
    this.state={"your state inside here"}
// bind your functions
}

您使用状态的方式即 state = { lang: language }您可以使用箭头函数删除构造函数和 super 和自动绑定(bind)

无需使用<React.Fragment>在你的情况下。如果您绝对必须使用它，请使用 <></> 的简写语法甚至不需要导入片段。仅使用 <React.Fragment>当您需要为片段分配一个属性时，例如迭代的键。

最后也是最重要的一点，我看不出有什么理由在你的导航栏中使用状态。您的应用程序应该能够很好地处理应用程序的状态，除非它增长然后您可以考虑使用 Redux .