Javascript reactjs函数中的第二个参数未定义

我一直在做一个小项目来熟悉ReactJS，到目前为止我玩得很开心。到目前为止，在这里的帮助下，我已经解决了一些问题

目前，我正在根据授权用户的角色更改标题中的链接。在我尝试注册一个用户之前，这个部分似乎工作得很好。我遇到了一个问题，

props.firebase

代码行未定义。我需要做些什么才能让它不被定义？当我删除{authUser}参数时，一切似乎都很顺利，但将其添加到函数时会出现问题。注册文件的代码如下：

import {Link as RouterLink, withRouter} from 'react-router-dom'
import {compose} from 'recompose';
import {withFirebase} from '../../components/Firebase'

import * as ROUTES from '../../constants/routes'

import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import {makeStyles} from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import SignInPage, {SignInLink} from "../SignInPage";
import styles from '../../assets/jss/website-template/views/signUpPage';
import Header from '../../components/Header/Header';
import HeaderLinks from '../../components/Header/HeaderLinks';
import image from '../../assets/img/kissing.JPG';
import Paper from '@material-ui/core/Paper';
import AuthUserContext from '../../components/Session/context';
function Copyright() {
    return (
        <Typography variant="body2" color="textSecondary" align="center">
            {'Copyright © '}
            <Link color="inherit" href="https://material-ui.com/">
                Your Website
            </Link>{' '}
            {new Date().getFullYear()}
            {'.'}
        </Typography>
    );
}

const useStyles = makeStyles(styles);


const SignUpPage = () => (
    <div>
        <AuthUserContext.Consumer>
            {authUser => authUser === null ?
                <SignUpForm authUser={null} /> :
                <SignUpForm authUser={authUser} /> }
        </AuthUserContext.Consumer>
    </div>
);

const SignUpFormBase = ({authUser}, props) => {
    const classes = useStyles();
    const [username, setUsername] = useState('');
    const [email, setEmail] = useState('');
    const [passwordOne, setPasswordOne] = useState('');
    const [passwordTwo, setPasswordTwo] = useState('');
    const [inviteCode, setInviteCode] = useState('');
    const [error, setError] = useState(null);
    const {...rest} = props;

    const isInvalid =
        passwordOne !== passwordTwo ||
        passwordOne === '' ||
        email === '' ||
        username === '';

    const doSubmit = event => {

        props.firebase
            .checkInviteCode(inviteCode)
            .then(role => {
                props.firebase
                    .doCreateUserWithEmailAndPassword(email, passwordOne)
                    .then(authUser => {
                        return props.firebase
                            .user(authUser.user.uid)
                            .set({
                                username,
                                email,
                                role,
                            });
                    })
                    .then(authUser => {
                        setUsername(username);
                        setPasswordOne(passwordOne);
                        setPasswordTwo(passwordTwo);
                        setEmail(email);
                        setInviteCode(inviteCode);
                        props.history.push(ROUTES.HOME);
                    })
                    .catch(error => {
                        setError(error);
                    });
            })
            .catch(error => {
                console.log(error);
            });

        event.preventDefault();
    }

    return (
        <div>
            <Header
                absolute
                color="transparent"
                brand="Material Kit React"
                rightLinks={<HeaderLinks authUser={authUser}/>}
                {...rest}
            />
            <div
                className={classes.pageHeader}
                style={{
                    backgroundImage: "url(" + image + ")",
                    backgroundSize: "cover",
                    backgroundPosition: "top center"
                }}
            >
                <Grid component="main" className={classes.container}>
                    <CssBaseline/>
                    <Grid item component={Paper} xs={12} sm={12} md={4}>
                        <div className={classes.paper}>
                            <Avatar className={classes.avatar}>
                                <LockOutlinedIcon/>
                            </Avatar>
                            <Typography component="h1" variant="h5">
                                Sign up
                            </Typography>
                            <form className={classes.form} noValidate onSubmit={doSubmit}>
                                <TextField
                                    margin="normal"
                                    autoComplete="fname"
                                    name="username"
                                    variant="outlined"
                                    required
                                    fullWidth
                                    id="username"
                                    label="Username"
                                    autoFocus
                                    value={username}
                                    onChange={event => setUsername(event.target.value)}
                                />
                                <TextField
                                    margin="normal"
                                    variant="outlined"
                                    required
                                    fullWidth
                                    id="email"
                                    label="Email Address"
                                    name="email"
                                    autoComplete="email"
                                    value={email}
                                    onChange={event => setEmail(event.target.value)}
                                />
                                <TextField
                                    margin="normal"
                                    variant="outlined"
                                    required
                                    fullWidth
                                    name="password"
                                    label="Password"
                                    type="password"
                                    id="password"
                                    autoComplete="current-password"
                                    value={passwordOne}
                                    onChange={event => setPasswordOne(event.target.value)}
                                />
                                <TextField
                                    margin="normal"
                                    variant="outlined"
                                    required
                                    fullWidth
                                    name="password"
                                    label="Confirm Password"
                                    type="password"
                                    id="password"
                                    autoComplete="confirm-password"
                                    value={passwordTwo}
                                    onChange={event => setPasswordTwo(event.target.value)}
                                />
                                <TextField
                                    margin="normal"
                                    variant="outlined"
                                    required
                                    fullWidth
                                    name="inviteCode"
                                    label="InviteCode"
                                    id="inviteCode"
                                    autoComplete="inviteCode"
                                    value={inviteCode}
                                    onChange={event => setInviteCode(event.target.value)}
                                />
                                <Button
                                    type="submit"
                                    fullWidth
                                    variant="contained"
                                    className={classes.submit}
                                    disabled={isInvalid}
                                >
                                    Sign Up
                                </Button>
                                {error && <p>{error.message}</p>}
                                <Grid container>
                                    <Grid item>
                                        <SignInLink href="#" variant="body2"/>
                                    </Grid>
                                </Grid>
                                <Box mt={2}>
                                    <Copyright/>
                                </Box>
                            </form>
                        </div>
                    </Grid>
                </Grid>
            </div>
        </div>
    );
}

const SignUpLink = () => (
    <p>
        <RouterLink to={ROUTES.SIGN_UP}>Don't have an account? Sign Up</RouterLink>
    </p>
);

const SignUpForm = compose(
    withFirebase,
    withRouter,
)(SignUpFormBase);

export default SignUpPage;

export {SignUpForm, SignUpLink};

从'react router dom'导入{Link as RouterLink，with router}
从“重新组合”导入{compose}；
从“../../components/Firebase”导入{withFirebase}
从“../../constants/ROUTES”导入*作为路由
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Link”导入链接；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Box”导入框；
从“@material ui/icons/LockOutlinedIcon”导入LockOutlinedIcon；
从“@material ui/core/Typography”导入排版；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Container”导入容器；
导入签名页，{SignInLink}来自“./SignInPage”；
从“../../assets/jss/website template/views/signUpPage”导入样式；
从“../../components/Header/Header”导入标题；
从“../../components/Header/HeaderLink”导入HeaderLink；
从“../../assets/img/kissing.JPG”导入图像；
从“@material ui/core/Paper”导入纸张；
从“../../components/Session/context”导入AuthUserContext；
函数版权（）{
返回(
{'Copyright}
你的网站
{' '}
{新日期（）.getFullYear（）}
{'.'}
);
}
const useStyles=生成样式（样式）；
const SignUpPage=（）=>(
{authUser=>authUser===null？
:
}
);
const SignUpFormBase=（{authUser}，props）=>{
const classes=useStyles（）；
const[username，setUsername]=useState（“”）；
const[email，setEmail]=useState（“”）；
const[passwordOne，setPasswordOne]=useState（“”）；
const[passwordTwo，setPasswordTwo]=useState（“”）；
const[inviteCode，setInviteCode]=useState（“”）；
const[error，setError]=useState（null）；
const{…rest}=props；
康斯特·伊森瓦利德=
密码一！==密码二||
passwordOne==''||
电子邮件==''||
用户名==''；
const doSubmit=事件=>{
火基道具
.checkInviteCode（inviteCode）
。然后（角色=>{
火基道具
.doCreateUserWithEmailAndPassword（电子邮件、passwordOne）
。然后（authUser=>{
返回道具。火力基地
.user（authUser.user.uid）
.设置({
用户名，
电子邮件，
角色
});
})
。然后（authUser=>{
setUsername（用户名）；
设置密码一（密码一）；
设置密码2（密码2）；
设置电子邮件（电子邮件）；
setInviteCode（inviteCode）；
道具。历史。推送（路线。回家）；
})
.catch（错误=>{
设置错误（错误）；
});
})
.catch（错误=>{
console.log（错误）；
});
event.preventDefault（）；
}
返回(
注册
setUsername（event.target.value）}
/>
setEmail（event.target.value）}
/>
setPasswordOne（event.target.value）}
/>
setPasswordTwo（event.target.value）}
/>
setInviteCode（event.target.value）}
/>
注册
{error&{error.message}
}
);
}
常量符号上行链路=（）=>(

没有帐户？注册吧

);
const SignUpForm=compose(
使用Firebase，
用路由器，
)（SignUpFormBase）；
导出默认签名；
导出{SignUpForm，SignUpLink}；

---

正如我提到的，问题在于

props.firebase

未定义，因此它找不到

checkInviteCodes（）

函数。

props始终是第一个参数，基于函数的组件的正确签名是

组件（props）

更改此项：

c