Question

我知道这个问题经常被问到，因为我已经完成了Google的前两页，并且已经在SO上进行了搜索，但是我没有找到解决方案，也不知道为什么会出现这个错误。 / p>

这是我的父组件

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);

这是我的孩子部分

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不是函数

由于以下问题，我正在尝试将数据从父母的孩子传递给父母： How to pass data from child component to its parent in ReactJS?

但是我不知道为什么我仍然会出现此错误，我什至尝试使用这样的PropTypes输入我的道具

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

我假设您正在寻找的是将状态从子级传递到props。假设您要保留子级组件的功能名称，如下所示：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。如果决定使用构造函数和带有prop的super，则必须执行以下操作：

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

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

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

最后也是最重要的一点，我看不出在导航栏中使用状态的原因。除非它增长，否则您的应用应该可以很好地处理其状态，否则您可以考虑使用Redux。

ReactJS这个道具不是函数

1 个答案: