使用React Router和Redux崩潰渲染組件

Question

我有一個React應用程序，該應用程序開始變得一發不可收拾，所以我決定選擇React-Redux。 一切順利，直到我遇到一個奇怪的錯誤。 它去了：

TypeError: this is undefined

如果它沒有在React-Redux庫中拋出，那將不會令人印象深刻。 像這樣：

PureComponent
node_modules/react/cjs/react.development.js:412

  409 |  */
  410 | 
  411 | function PureComponent(props, context, updater) {
> 412 |   this.props = props;
  413 | ^  this.context = context; // If a component has string refs, we will assign a different object later.
  414 | 
  415 |   this.refs = emptyObject;

控制台說：

The above error occurred in one of your React components:
    in Unknown (created by Context.Consumer)
    in Connect(Component) (at RegisterFormUI.jsx:32)
    in form (at RegisterFormUI.jsx:21)
    in div (at RegisterFormUI.jsx:18)
    in div (at RegisterFormUI.jsx:15)
    in div (at RegisterFormUI.jsx:14)
    in div (at RegisterFormUI.jsx:13)
    in Unknown (created by Context.Consumer)
    in Connect(Component) (created by Route)
    in Route (at SharedPaths.jsx:18)
    in Switch (at NavigationUI.jsx:98)
    in Router (created by BrowserRouter)
    in BrowserRouter (at NavigationUI.jsx:65)
    in Unknown (created by Context.Consumer)
    in Connect(Component) (at App.js:50)
    in div (at App.js:49)
    in App (at src/index.js:15)
    in Provider (at src/index.js:14)

這沒有任何意義，因為我的RegisterFormUI組件中沒有調用Connect方法。 我不知道我搞砸了什么。 這是我的表單用戶界面：

export default ({user = {}}) => {
    return <BrowserRouter>
        <React.Fragment>
            <Navbar className='navbar_all'>
                <Navbar.Header>
                    <Navbar.Brand>
                        <LinkContainer className='navbar_brand' id='home' to='/'>
                            <NavItem>
                                <img alt='ZdajTo' src="assets/images/new_logo.png" style={{height: '30px'}}/>
                            </NavItem>
                        </LinkContainer>
                    </Navbar.Brand>
                </Navbar.Header>
                <Nav className='float_right'>
                    <LinkContainer to='/homepage' style={{textDecoration: 'none'}}>
                        <NavItem>
                            <button style={{
                                backgroundColor: '#F16049',
                                border: '4px solid #F16049',
                                borderRadius: '4px',
                                padding: '10px',
                                marginBottom: '5px',
                                color: '#fff'
                            }}>
                                DLA ROZWIĄZUJĄCYCH
                            </button>
                        </NavItem>
                    </LinkContainer>
                </Nav>
                <Nav className='float_right'>
                    <SharedNavBar user={user.userAcc}/>
                    {renderNavBar(user)}
                </Nav>
            </Navbar>
            <Switch>
                {renderPaths(user) ? renderPaths(user).map(path => path) : null}
                {SharedPaths.map(path => path)}
            </Switch>
        </React.Fragment>
    </BrowserRouter>
};

我的容器是這樣的：

import {connect} from 'react-redux';
import UI from '../../ui/studentRegistrationUI/RegisterFormUI'
import {beginRegistration} from "../../../../actions";

const mapStateToProps = state => ({user: state.user});

const mapDispatchToProps = dispatch => ({
    handleClick() {
        dispatch(
            beginRegistration('student')
        )
    }
});
export default connect(mapStateToProps, mapDispatchToProps)(UI)

知道我搞砸了嗎？

Answer 1

我的一個子組件存在問題。 我主要是嘗試這樣做：

{CheckBox('Regulations', '/assets/regulamin.pdf', 'regulamin')}

我應該這樣做：

<CheckBox id={'Regulations'} path={'/assets/regulamin.pdf'} text={'regulamin'}/>

這是供將來參考的容器：

import {connect} from 'react-redux';
import UI from '../../../ui/studentRegistrationUI/components/CheckBoxUI'

const mapStateToProps = (state, props) => ({user: state.user, id: props.id, path: props.path, text: props.text});

export default connect(mapStateToProps)(UI)