使用 React Router 渲染组件和 Redux 崩溃

debugcn 发表于 Dev

亚历克斯·艾恩赛德

我有一个 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)

这是没有意义的，因为Connect我的RegisterFormUI组件中没有调用方法。我不知道我搞砸了什么。这是我的表单 UI：

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)

知道我搞砸了什么吗？

亚历克斯·艾恩赛德

我的一个子组件有问题。主要是我试图这样做：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。