javascript - 类型错误 : Cannot read property of null while passing data in React

Question

我是 React 的新手，所以这个问题。这是我的 App.js

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {loggedIn: false}
    }

    render() {
        return (
            <div>
                <Helmet>
                    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
                </Helmet>
                <Wrapper state={this.state.loggedIn}/>
            </div>

        )

    }
}

export default App;

我正在尝试将状态传递给 Wrapper 组件。

class Wrapper extends React.Component {

    render() {
        const MainComp = this.state.loggedIn ? CoreLogged : CoreUnlogged;
        return (
            <BrowserRouter>
                <div className="wrapper">
                    <Header state={this.state.loggedIn}/>
                    <MainComp />
                </div>
            </BrowserRouter>
        );
    }
}

export default Wrapper;

我得到以下错误，

TypeError: Cannot read property 'loggedIn' of null

我在这里做错了什么？

Answer 1

在 Wrapper 组件中编辑你的 render 方法以使用 this.props.state 而不是 this.state 因为你将一个名为 state 的 Prop 传递给组件不在实例中，同时 state prop 是 Boolean not and object 将您的代码编辑成这样的

 class Wrapper extends React.Component {

render() {
    const MainComp = this.props.state? CoreLogged : CoreUnlogged;
    return (
        <BrowserRouter>
            <div className="wrapper">
                <Header state={this.props.state}/>
                <MainComp />
            </div>
        </BrowserRouter>
    );
}
  }
  export default Wrapper 

如果你想在组件中使用状态，你需要在构造函数中初始化状态

在这里了解更多

react state and life cycles

component state FAQ

understanding react.js state