Javascript 如何将“名称”的值从“注册”页面放入仪表板页面

嗨，我想把名字从注册页面放到仪表板页面下面是我的注册页面代码

 import React, { useState } from 'react'
import { Typography, Paper, Button, FormControl, Input, InputLabel } from '@material-ui/core'
import withStyles from '@material-ui/core/styles/withStyles'
import { Link, withRouter } from 'react-router-dom'
import { useDispatch } from 'react-redux';
import { startRegister } from '../actions/auth';

const styles = theme => ({
    main: {
        width: 'auto',
        display: 'block',
        marginLeft: theme.spacing(3),
        marginRight: theme.spacing(3),
        [theme.breakpoints.up(400 + theme.spacing(3) * 2)]: {
            width: 400,
            marginLeft: 'auto',
            marginRight: 'auto',
        },
    },
    paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(3)}px`,
    },
    form: {
        width: '100%',
        marginTop: theme.spacing(1),
    },
    submit: {
        marginTop: theme.spacing(3),
    },
})



const Register = (props) => {
    const { classes } = props
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const dispatch = useDispatch();


    const onRegister = async () => {
        dispatch(startRegister(email, password));
        props.history.push('/dashboard')
    }

    return (
        <main className={classes.main}>
            <Paper className={classes.paper}>
                <Typography component="h1" variant="h5">
                    Register Account
                </Typography>

                <form className={classes.form} onSubmit={e => e.preventDefault() && false}>

                    <FormControl margin="normal" required fullWidth>
                        <InputLabel htmlFor="name">Name</InputLabel>
                        <Input id="name" name="name" autoComplete="off" autoFocus value={name} onChange={e => setName(e.target.value)} />
                    </FormControl>

                    <FormControl margin="normal" required fullWidth>
                        <InputLabel htmlFor="email">Email Address</InputLabel>
                        <Input id="email" name="email" autoComplete="off" value={email} onChange={e => setEmail(e.target.value)} />
                    </FormControl>

                    <FormControl margin="normal" required fullWidth>
                        <InputLabel htmlFor="password">Password</InputLabel>
                        <Input name="password" type="password" id="password" autoComplete="off" value={password} onChange={e => setPassword(e.target.value)} />
                    </FormControl>

                    <Button
                        type="submit"
                        fullWidth
                        variant="contained"
                        color="primary"
                        onClick={onRegister}
                        className={classes.submit}
                    >
                        Register
                    </Button>

                    <Button
                        type="submit"
                        fullWidth
                        variant="contained"
                        color="secondary"
                        component={Link}
                        to="/login"
                        className={classes.submit}>
                        Go back to Login
                    </Button>
                </form>
            </Paper>
        </main>
    )

}

export default withRouter(withStyles(styles)(Register))

import React，{useState}来自“React”
从“@material ui/core”导入{排版、纸张、按钮、表单控件、输入、输入标签}
从“@material ui/core/styles/withStyles”导入withStyles
从“react router dom”导入{Link，withRouter}
从'react redux'导入{useDispatch}；
从“../actions/auth”导入{startRegister}；
常量样式=主题=>({
主要内容：{
宽度：“自动”，
显示：“块”，
边缘左侧：主题。间距（3），
边缘光：主题。间距（3），
[主题.断点.向上（400+主题.间距（3）*2）]：{
宽度：400，
marginLeft:'自动'，
marginRight:“自动”，
},
},
论文：{
marginTop：主题。间距（8），
显示：“flex”，
flexDirection:'列'，
对齐项目：“居中”，
填充：`${theme.spating（2）}px${theme.spating（3）}px${theme.spating（3）}px`，
},
表格：{
宽度：“100%”，
marginTop：主题。间距（1），
},
提交：{
marginTop：主题。间距（3），
},
})
常量寄存器=（道具）=>{
常量{classes}=props
const[name，setName]=useState（“”）
const[email，setEmail]=useState（“”）
const[password，setPassword]=useState（“”）
const dispatch=usedpatch（）；
const onRegister=async（）=>{
发送（startRegister（电子邮件、密码））；
props.history.push（“/dashboard”）
}
返回(
登记帐户
e、 preventDefault（）&&false}>
名称
setName（e.target.value）}/>
电子邮件地址
setEmail（e.target.value）}/>
密码
setPassword（e.target.value）}/>
登记
返回登录
)
}
使用路由器导出默认值（使用样式（样式）（寄存器））

我想把name的值放在displayName中，它的值为null 以下是我的仪表板页面代码

 import React from 'react'
import { Typography, Paper, Button } from '@material-ui/core'
import withStyles from '@material-ui/core/styles/withStyles'
import { Link, withRouter } from 'react-router-dom'
import firebase from '../firebase/firebase';

const styles = theme => ({
    main: {
        width: 'auto',
        display: 'block', // Fix IE 11 issue.
        marginLeft: theme.spacing(3),
        marginRight: theme.spacing(3),
        [theme.breakpoints.up(400 + theme.spacing(3) * 2)]: {
            width: 400,
            marginLeft: 'auto',
            marginRight: 'auto',
        },
    },
    paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(3)}px`,
    },
    form: {
        width: '100%',
        marginTop: theme.spacing(1),
    },
    submit: {
        marginTop: theme.spacing(3),
    },
})

const Dashboard = props => {

    const { classes } = props
    const onSignout = async (e) => {
        await firebase.auth().signOut()
        props.history.push('/')
    }

    return (
        <main className={classes.main}>
            <Paper className={classes.paper}>
                <Typography component="h1" variant="h5">

从“React”导入React
从“@material ui/core”导入{排版、纸张、按钮}
从“@material ui/core/styles/withStyles”导入withStyles
从“react router dom”导入{Link，withRouter}
从“../firebase/firebase”导入firebase；
常量样式=主题=>({
主要内容：{
宽度：“自动”，
显示：'块'，//修复IE 11问题。
边缘左侧：主题。间距（3），
边缘光：主题。间距（3），
[主题.断点.向上（400+主题.间距（3）*2）]：{
宽度：400，
marginLeft:'自动'，
marginRight:“自动”，
},
},
论文：{
marginTop：主题。间距（8），
显示：“flex”，
flexDirection:'列'，
对齐项目：“居中”，
填充：`${theme.spating（2）}px${theme.spating（3）}px${theme.spating（3）}px`，
},
表格：{
宽度：“100%”，
marginTop：主题。间距（1），
},
提交：{
marginTop：主题。间距（3），
},
})
const Dashboard=props=>{
常量{classes}=props
const onSignout=async（e）=>{
等待firebase.auth（）.signOut（）
props.history.push（“/”）
}
返回(

这里我想把name的值放在displayName中 我正在做firebase.auth（）.currentUser.updateProfile（{displayName:name}） 但它不支持，因为注册中的名称不会导出

{`Welcome User${firebase.auth（）.currentUser.displayName}}
签到
)
}
使用路由器导出默认值（使用样式（样式）（仪表板））

维护一个上下文或redux状态，用户注册后可以从注册页面更新该状态。在仪表板页面中使用该值为什么在注册时不能将

名称

与凭据一起提交，并在成功注册（和身份验证）后更新当前用户显示名称？我认为另一种选择是在路由状态下发送

name

，以便从

location.state

中的

dashboard

访问“/dashboard”页面。

                    {`Welcome User ${firebase.auth().currentUser.displayName}`}
                </Typography>
                <Button
                    type="submit"
                    fullWidth
                    variant="contained"
                    color="primary"
                    component={Link}
                    to='/'
                    className={classes.submit}
                    onClick={onSignout}
                >
                    Signout
        </Button>
            </Paper>
        </main>
    )
}

export default withRouter(withStyles(styles)(Dashboard))